Question

我有这样的结构：

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

CSS：

.a { position:absolute; }
.b { position:absolute; }
.c { position:absolute; }

结果：这里的街区在＆＃34; a＆＃34;之外。坐标：顶部：100px;左：100px
预期：

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

坐标：顶部：100px;左：100px（相同），但＆＃34; c＆＃34;在里面＆＃34; b＆＃34;。

结果，使用相同的坐标，我们在第一种情况下获得偏移。我怎么能避免呢？谢谢！

Answer 1

制作两个片段;

1）硬性修复与您当前的结构:(在父容器上使用 position：relative ，在子容器上使用 position：relative ）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

2）建议，更清洁的修复：

＆＃13;

.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%;
}

＆＃13;

<div class="a">
  <div class="b">
    <div class="b-wrapper">
      <div class="c"></div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我实际上不太了解你的问题。在这里打赌是我制作的片段，你是如何想象它的。

＆＃13;

.container{
  max-width: 200px;
  position:relative;
  display:inline-flex;
}

.a{
  position:relative;
  width: 200px;
  height:200px;
  border: 2px solid #222;
}

.b{
  position:absolute;
  border: 2px solid #f69;
  height: 150px;
  width: 150px;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.c{
  position:absolute;
  height: 50px;
  width: 50px;
  border: 2px solid brown;
  bottom: -30px;
  right: -30px;
}

＆＃13;

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

＆＃13;

Answer 3

你有没有尝试过使用课程＆＃39; b＆＃39;而不是＆＃39; c＆＃39;？

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

获取兄弟内部div的位置坐标（顶部，左侧）时如何避免偏移

3 个答案: