我在另一个 div 中有两个 div，我想使用 css 将一个子 div 定位到父 div 的右上角，将另一个子 div 定位到父 div 的底部。即，我想对两个子 div 使用绝对定位，但相对于父 div 而不是页面定位它们。我怎样才能做到这一点？
示例 html：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
#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 来定位子节点。
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
以防有人想将子 div 直接放在父级下面
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
工作演示Codepen
如果您不给父母任何位置，那么默认情况下它需要 static。如果您想了解这种差异，请参阅此示例
示例 1::
#mainall
{
background-color:red;
height:150px;
overflow:scroll
}
这里父类没有位置，所以元素是根据body放置的。
示例 2::
#mainall
{
position:relative;
background-color:red;
height:150px;
overflow:scroll
}
在此示例中，父级具有相对位置，因此元素绝对定位在相对父级内部。
在需要粘性浮动“后退按钮”/“返回顶部”按钮的用例中。但是您的主要内容区域可以缩小以支持辅助内容区域
您可以在 position: absolute; 的容器内使用 position: fixed; 以获得类似于 sticky 但更强大的更灵活的行为
函数 toggleOpen() { 常量元素 = document.getElementById("sideContnet"); if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } } .container { 显示：弹性；边距：0 自动；宽度：600px； } .contentBig { 宽度：600px;最小宽度：66%；位置：相对； } .contentSmall { 宽度：230px;最小宽度：33%； } .absolute { 位置：绝对；顶部：0；右：0；底部：0；宽度：60px； } .fiexBack { 位置：固定；背景颜色：红色；底部：20px；填充：5px； } .button { 宽度：200px;填充：12px；背景色：珊瑚色；边距：0 自动； }
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坐在amet quam diam。 Nulla vel sodales est. Quisque sed accumsan urna。 Ut tristique efficitur ante a congue。 Cras elementum dignissim Tellus，在 rhoncus ex faucibus nec 中。 Sed vitae mi eu leo interdum aliquam。 Donec eleifend nisl sem，一个 tincidunt velit commodo sat amet。 Nulla ex eros，在 fringilla ut 中的 tempor，accumsan ac augue。 Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum。
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坐在amet quam diam。 Nulla vel sodales est. Quisque sed accumsan urna。 Ut tristique efficitur ante a congue。 Cras elementum dignissim Tellus，在 rhoncus ex faucibus nec 中。 Sed vitae mi eu leo interdum aliquam。 Donec eleifend nisl sem，一个 tincidunt velit commodo sat amet。 Nulla ex eros，在 fringilla ut 中的 tempor，accumsan ac augue。 Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum。
Morbi leo nulla，varius nec dignissim quis，前庭 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 在 risus vitae发酵。 Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
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 sat amet leo。 Etiam pulvinar lectus tincidunt turpis viverra maximus。 Donec rutrum rutrum dui 坐在 amet congue。
Morbi leo nulla，varius nec dignissim quis，前庭 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 在 risus vitae发酵。 Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
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坐在amet quam diam。 Nulla vel sodales est. Quisque sed accumsan urna。 Ut tristique efficitur ante a congue。 Cras elementum dignissim Tellus，在 rhoncus ex faucibus nec 中。 Sed vitae mi eu leo interdum aliquam。 Donec eleifend nisl sem，一个 tincidunt velit commodo sat amet。 Nulla ex eros，在 fringilla ut 中的 tempor，accumsan ac augue。 Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum。
Morbi leo nulla，varius nec dignissim quis，前庭 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 在 risus vitae发酵。 Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
关注公众号
不定期副业成功案例分享
#father { position: relative; }？static的父级。