如何修复特定 div 在 CSS 中的位置

Question

我想像这样固定 div 的位置：

所以我做了这个代码（注意 div 在 HTML 中的顺序是相反的）

<div id="content">
    <div id="area">
        <div id="bottom">bottom</div>
        <div id="middle">middle</div>
        <div id="top">top</div>
    </div>
</div>

和css代码（颜色不重要）

#area{
    position:fixed;
    right: 10px;
    bottom: 10px;
    border: 2px solid green;
    padding: 10px;
}
#bottom{
    padding: 5px;
    border: 1px solid yellow;
    bottom: 0;
    position: relative;
}
#middle{
    padding: 5px;
    border: 1px solid blue;
    bottom: 30px;
    position: relative;
}
#top{
    padding: 5px;
    border: 1px solid red;
    bottom: 60px;
    position: relative;
}

为什么#area里面的所有div都在#area上面？ Code example

Answer 1

简单修复，只需删除 position 和 bottom 属性，就可以了：

#area{
    position:fixed;
    right: 10px;
    bottom: 10px;
    border: 2px solid green;
    padding: 10px;
}
#bottom{
    padding: 5px;
    border: 1px solid yellow;
    display: block;
}
#middle{
    padding: 5px;
    border: 1px solid blue;
    display: block;
}
#top{
    padding: 5px;
    border: 1px solid red;
    display: block;
}

<div id="content">
    <div id="area">
        <div id="bottom">bottom</div>
        <div id="middle">middle</div>
        <div id="top">top</div>
    </div>
</div>

Answer 2

因为您在相关元素中将尺寸设置为底部..将其删除并添加 top 以获得最佳实践。

CSS

    #area{
    position:fixed;
    right: 10px;
    bottom: 10px;
    border: 2px solid green;
    padding: 10px;
}
#bottom{
    padding: 5px;
    border: 1px solid yellow;
    top: 60px;
    position: relative;
}
#middle{
    padding: 5px;
    border: 1px solid blue;
    position: relative;
}
#top{
    padding: 5px;
    border: 1px solid red;
    top: -60px;
    position: relative;
}

Demo here

Answer 3

position:relative 指的是相对于对象的 own 视觉位置，因为每个元素（显然）是 30px 高，顶部和底部项目需要移动 60px各自的方向。

如果元素的大小未知，建议使用替代解决方案。

#area {
  position: fixed;
  right: 10px;
  bottom: 10px;
  border: 2px solid green;
  padding: 10px;
}
#bottom {
  padding: 5px;
  border: 1px solid yellow;
  top: 60px;
  /* up 60px from where it is */
  position: relative;
}
#middle {
  padding: 5px;
  border: 1px solid blue;
  /* no need to move*/
}
#top {
  padding: 5px;
  border: 1px solid red;
  top: -60px;
  /* down 60px from where it is */
  position: relative;
}

<div id="content">
  <div id="area">
    <div id="bottom">bottom</div>
    <div id="middle">middle</div>
    <div id="top">top</div>
  </div>
</div>

使用 Flexbox 的替代解决方案：不需要任何定位。

#area{
    position:fixed;
    display:flex;
    flex-direction:column-reverse;
    right: 10px;
    bottom: 10px;
    border: 2px solid green;
    padding: 10px;
}

#area{
    position:fixed;
    display:flex;
    flex-direction:column-reverse;
    right: 10px;
    bottom: 10px;
    border: 2px solid green;
    padding: 10px;
}
#bottom{
    padding: 5px;
    border: 1px solid yellow;
}
#middle{
    padding: 5px;
    border: 1px solid blue;
 }
#top{
    padding: 5px;
    border: 1px solid red;

}

<div id="content">
    <div id="area">
        <div id="bottom">bottom</div>
        <div id="middle">middle</div>
        <div id="top">top</div>
    </div>
</div>

Answer 4

因为根据您使用的位置，上、左、下、右的工作方式不同：

position: static: 它们被忽略
position: relative: 相对于原始元素在流中的位置
position: absolute ：相对于第一个 absolute/relative 父级
position: fixed：相对视口（可见区域）

在 this great article 上阅读更多内容。

然后在你的情况下 put the divs in the right order in the HTML and remove the bottom positioning, or play with the positioning 用 CSS 重新反转它们（但不清楚你为什么要这样做）。

如何修复特定 div 在 CSS 中的位置

How to fix specific div's position in CSS

html

css

css-position