|
|
我在另一个div中有两个div，我希望使用css将一个子div放在父div的右上角，另一个子div放在父div的底部。也就是说，我想对两个子div使用绝对定位，但将它们相对于父div而不是页面进行定位。我该怎么做呢？
示例html：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
4 个回答
高票数
最新
Eliran Malka
修改于2015-06-16 20:04
得票数
34
div#father {
position: relative;
div#son1 {
position: absolute;
/* put your coords here */
div#son2 {
position: absolute;
/* put your coords here */
}
Domenic
修改于2012-05-08 03:53
得票数
1052
#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
对子项进行定位。
petergus
回答于2017-04-05 15:11
得票数
24
以防有人想要将子div直接放在父目录下
#father {
position: relative;
#son1 {
position: absolute;
top: 100%;
}工作演示 Codepen
Avner Israel
回答于2021-06-24 17:02
得票数
3
在需要粘性浮动的“后退按钮”/“返回顶部”按钮的情况下。但是你有一个可以缩小的主内容区域，而不是辅助内容区域。
您可以在
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>
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.
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.
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.
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.
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.
<div id="sideContnet" class="contentSmall">
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.