位置绝对但相对于父级

Question

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

示例 html：

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

Answer 1

#father {
   position: relative;
}

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

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

这是有效的，因为position: absolute意思是“使用top , right , bottom , left相对于最近的具有position: absolute或position: relative祖先定位自己。

所以我们让#father有position: relative ，孩子有position: absolute ，然后使用top和bottom来定位孩子。

Answer 2

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

Answer 3

如果有人想将子 div 直接放置在父级下方

#father {
   position: relative;
}

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

工作演示Codepen

Answer 4

如果您不给 parent 任何位置，则默认情况下它采用static 。 如果您想了解这种差异，请参阅此示例

示例 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

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

这里父类没有位置，所以元素是根据主体放置的。

示例 2::

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

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

在这个例子中，父元素具有相对位置，因此元素绝对定位在相对父元素内。

Answer 5

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

您可以使用position: fixed; 在position: absolute;容器内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>

完整代码示例