613

我在另一个 div 中有两个 div，我想使用 css 将一个子 div 放置在父 div 的右上角，将另一个子 div 放置在父 div 的底部。即，我想对两个子 div 使用绝对定位，但相对于父 div 而不是页面定位它们。我怎样才能做到这一点？

示例 html：

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>
4

5 回答 5

1094 
#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

之所以有效，是因为position: absolute它的意思是“使用top, right, bottom,left将自己定位于与拥有position: absolute或的最近祖先的关系中position: relative。”

所以我们 make #fatherhave position: relative，而孩子们 have position: absolute，然后使用topandbottom来定位孩子们。

于 2012-05-07T18:44:11.647 回答
34 
div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}
于 2012-05-07T18:43:49.180 回答
25

以防有人想将子 div 直接放在父级下面

#father {
   position: relative;
}

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

工作演示Codepen

于 2017-04-05T07:11:27.520 回答
6

如果你不给父母任何位置，那么默认情况下它需要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
}

在此示例中，父级具有相对位置，因此元素绝对定位在相对父级内部。

于 2014-03-13T11:12:28.617 回答
3

在需要粘性浮动“后退按钮”/“返回顶部”按钮的用例中。但是您的主要内容区域可以缩小以支持辅助内容区域

您可以position: fixed;在容器内使用position: absolute;以获得更灵活的行为，类似于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>

完整代码示例

于 2021-06-24T09:02:28.467 回答