位置绝对但相对于父级

我在另一个div里面有两个div，我想把一个子div放在父div的右上方，另一个子div放在使用css的父div的底部。即，我想使用绝对定位与两个子div，但定位他们相对于父div而不是页面。我该怎么做呢?

html:示例

<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
542453 次浏览
小开 
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
小开
最佳答案 
#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来定位孩子。

小开

如果你不给任何位置的父母，那么默认是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
}

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

小开

如果有人想把子div直接放在父div下面

#father {
position: relative;
}


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

工作演示Codepen

小开

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

您可以在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>

< a href = " https://codepen。io/avneri/pen/mdWZYBB" rel="nofollow noreferrer">完整代码示例 . io/avneri/pen/mdWZYBB" rel="nofollow noreferrer">


提交答案