Question

我想像这样修复我的div的位置： enter image description here

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

<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

userInfo.setLineWrap(true);指的是相对于物体的自己的视觉位置，因为每个元素（显然）高30px，顶部和底部物品需要在相应方向上移动60px。 / p>

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

position:relative

#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;
}

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

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

#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;

}

Answer 2

因为top，left，bottom，right根据您使用的位置而有所不同：

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

详细了解this great article。

然后在您的情况下只需put the divs in the right order in the HTML并移除底部定位，或play with the positioning以使用CSS重新反转它们（但不清楚为什么要这样做）。

Answer 3

因为您要在相对元素中将大小设置为底部..删除它并添加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 4

简单修复，只需删除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>

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

4 个答案: