position: fixed;和display: flex;有什么局别

`position: fixed;` 和 `display: flex;` 是用于控制 HTML 元素布局的 CSS 属性，它们有不同的作用和用法。

- `position: fixed;` 用于将元素固定在页面上的某个位置，不随滚动条的滚动而改变位置。通常用于创建固定在页面顶部或底部的导航栏、广告等。`position: fixed;` 不会影响其他元素的布局和位置。
- `display: flex;` 用于创建弹性布局，可以使元素沿着主轴和交叉轴方向排列。通过 `flex` 属性可以控制元素的大小、间距和对齐方式等。`display: flex;` 可以帮助开发者更轻松地实现响应式布局和移动端适配。

总的来说，`position: fixed;` 和 `display: flex;` 的作用和用法是不同的，它们可以根据需求灵活使用。

相关问题

overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;

这是一些CSS属性，可以用来控制HTML元素的布局和位置。具体如下：

- overflow: hidden： 当元素内容超出其高度和宽度时，隐藏额外的内容。
- display: flex：用于弹性布局，可以使元素在同一方向上对齐，能够轻松控制元素的宽度、高度、间距和排序。
- display: inline-flex：与flex相似，但是它是在行内而不是块内。
- display: inline-block：行内块元素，与默认的行内元素相似，但可以设置宽度和高度。
- position: absolute：基于最近的非 static 定位祖先元素的位置来确定元素自身位置，不会改变其他元素的位置。
- position: fixed：元素相对于视口的位置而不是相对于文档的位置进行定位，即无论滚动条如何滚动，元素的位置都不会改变。

范例：

假设我有一个div元素，它的id为myDiv，并且我希望它始终在浏览器窗口的右下角，宽度为200px，高度为100px，同时不显示溢出的内容，并且在内部使用弹性布局。我会这样设置CSS属性：

#myDiv{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 100px;
  overflow: hidden;
  display: flex;
}

display:flex和position:fixed

回答: 当使用display:flex和position:fixed一起使用时，会出现问题。\[1\]在这种情况下，设置了position:fixed后，display:flex的布局效果会失效。\[2\]这是因为position:fixed会使元素脱离文档流，不再参与flex布局。\[3\]解决这个问题的方法是给使用display:flex的盒子外面嵌套一个盒子，并给外层盒子添加position:absolute/fixed，并设置width:100%。这样可以保持flex布局的效果，并实现固定定位。
#### 引用[.reference_title]
- *1* *2* [解决【display：flex布局】遇上 【position: absolute / fixed 】的失效问题](https://blog.csdn.net/Miss_liangrm/article/details/99184017)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [当position: fixed； 遇到 display: flex；](https://blog.csdn.net/brokenmile/article/details/113445229)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]