gpt4 book ai didi

html - 获取兄弟内部div的位置坐标(顶部,左侧)时如何避免偏移

转载 作者:太空宇宙 更新时间:2023-11-04 01:30:19 25 4
gpt4 key购买 nike

我有这样的结构:

<body>
<div class="a">
<div class="b">
</div>
</div>
<div class="c">
</div>
</body>

CSS:

.a { position:absolute; }
.b { position:absolute; }
.c { position:absolute; }
  • 结果: enter image description here这里的 block 在“a”之外。坐标:顶部:100px;左:100px

  • 预期:

enter image description here

<body>
<div class="a">
<div class="b">
<div class="c"></div>
</div>
</div>
</body>

坐标:顶部:100px;左:100px(相同),但“c”在“b”内。

因此,使用相同的坐标,我们在第一种情况下得到偏移量。我怎样才能避免它?谢谢!

最佳答案

做了两个片段

1) 硬修复您当前的结构:(在父容器上使用position:relative,在子容器上使用position:relative)

.wrapper{
width:100px;
position:relative;
}

.a{
width:100px;
height:80px;
border:1px solid black;
position:relative;
}

.b{
width:60px;
height:40px;
border:1px solid black;
position:absolute;
margin: auto;
z-index:1000;
top: 0; left: 0; bottom: 0; right: 0;
}

.c{
width:60px;
height:40px;
border:1px solid black;
top:75%;
left:80%;
z-index:1000;
position:absolute;
}
<div class="wrapper">
<div class="a">
<div class="b">

</div>
</div>
<div class="c"></div>
</div>

2) 建议,更清洁的修复:

.a{
width:120px;
height:100px;
border:1px solid black;
position:relative;
}

.b{
position:absolute;
width:80px;
height:60px;
border:1px solid black;
top:0; left:0; right:0; bottom:0;
margin:auto;
}

.b-wrapper{
position:relative;
width:100%;
height:100%;
}

.c{
position:absolute;
width:80px;
height:60px;
border:1px solid black;
top:100%;
left:100%;
}
<div class="a">
<div class="b">
<div class="b-wrapper">
<div class="c"></div>
</div>
</div>
</div>

关于html - 获取兄弟内部div的位置坐标(顶部,左侧)时如何避免偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47248044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com