如果你不给任何位置的父母，那么默认情况下，它采取静态。如果你想了解这种差异，请参考这个例子

示例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
}

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

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

你可以用position: fixed;容器内的位置:绝对;以获得更灵活的行为类似粘性，但更强大

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>

完整代码示例

如果你不给任何位置的父母，那么默认情况下，它采取静态。如果你想了解这种差异，请参考这个例子

示例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

#father {
   position: relative;
}

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

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

这是可行的，因为position: absolute意味着类似于“使用上、右、下、左来定位自己与拥有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 */
}