绝对定位，但相对于父元素定位。

Question

我在另一个div中有两个子div，并且我想使用CSS将一个子div定位到父div的右上角，将另一个子div定位到父div的底部。换句话说，我想使用绝对定位来定位这两个子div，但是相对于父div而不是整个页面。我该如何实现这个效果？

示例HTML代码：

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
</div>

- BlaShadow

---

你想让son1位于father的右上角，但son2应该在底部的哪个位置？左边、右边还是中间？ - j08691

在这种情况下，您需要将position: relative设置为父元素，并将position: absolute设置为子元素。在第一个子元素上，您应该将top: 0和right: 0放置在父元素的右上角。在第二个子元素上，您应该将bottom: 0放置在父元素的底部。这里有一篇很棒的文章 https://kolosek.com/css-position-relative-vs-position-absolute，详细解释了相对定位和绝对定位。 - Nesha Zoric

Answer 1

#parent {
   position: relative;
}
    
#child1 {
   position: absolute;
   top: 0;
}
  
#child2 {
   position: absolute;
   bottom: 0;
}

这个原理是因为position: absolute的意思是“使用top、right、bottom、left来相对于最近的具有position: absolute或position: relative的祖先元素定位自己。”

当使用相对单位时，高度或宽度的工作原理也是一样的。该值是相对于包含块应用的。

因此，我们使#parent具有position: relative，子元素具有position: absolute，然后使用top和bottom来定位子元素。

- Domenic

---

为什么需要 #father { position: relative; } 这段代码？ - joshreesjones

需要改变内在的“立场规则”。 - BlaShadow

由于规范说明绝对定位的元素是相对于第一个“定位”的父元素定位，这意味着任何没有设置 static 定位属性的父元素都可以。 - Alex W

这种情况怎么处理呢：FATHER是相对的，其高度为100%。如何将SON和SON2定位在父元素的高度的20%和70%处呢？ - Rossitten

@BruceSun https://www.w3.org/TR/CSS2/visudet.html#containing-block-details - Alex W

Answer 2

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

- Brian Warshaw

---

如果您需要调整父元素和子元素的大小呢？ - FrenkyB

Answer 3

如果有人想要将一个子 div 直接放在父 div 下方

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

演示 Codepen

- petergus

Answer 4

如果您没有给父元素指定任何位置，则默认为 static。如果您想了解这种差异，请参考以下示例：

示例1： http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

在这个例子中，父类没有定位，因此元素按照body的位置放置。

示例2：

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

在这个例子中，父元素具有相对定位，因此元素相对于相对定位的父元素进行绝对定位。

- anam

---

那么，如果你没有 #mainall{height:150px} 呢？我的意思是，如果 mainall 的高度是动态的呢？ - Albert Català

如果您想让浮动元素相对于父元素在页面（和CSS）加载时的位置，请使用相对定位。如果您想在页面加载后更新它，请使用JavaScript - clientX和clientY是一个很好的起点。 - Abraham Brookes

Answer 5

在需要一个具有“回到顶部”或“返回”功能的固定按钮的使用情况下，但您有可能会使主内容区域收缩以腾出空间给侧边栏。

您可以在一个容器内使用“position: absolute;”，并在其中使用“position: fixed;”来获得类似于“sticky”的更加灵活的行为，但更加强大。

function toggleOpen() {
  const element = document.getElementById("sideContnet");
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}

.container {
  display: flex;
  margin: 0 auto;
    width: 600px;
}

.contentBig {
  width: 600px;
  min-width: 66%;
  position: relative;
  
}
.contentSmall {
  width: 230px;
  min-width: 33%;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
}

.fiexBack {
  position: fixed;
  background-color: red;
  bottom: 20px;
  padding: 5px;
}

.button {
  width: 200px;
  padding: 12px;
  background-color: coral;
  margin: 0 auto;
}

<button onclick="toggleOpen()" id="toggleSide" class="button">
  toggle open side content
</button>
<div class="container">
  <div class="contentBig">
    <div class="absolute">
      <div class="fiexBack">Back</div>
  </div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
   <div id="sideContnet" class="contentSmall">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
</div>

完整代码示例

- Avner Israel