方法（左上）の位置座標を取得するときにオフセット避けるために、内側のdiv

兄弟の私は、このような構造を持っている：方法（左上）の位置座標を取得するときにオフセット避けるために、内側のdiv

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

はCSS：

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

結果：ブロックは "a"の外側にあります。座標：上：100ピクセル。左：期待100pxに
：

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

座標：トップ：100ピクセル;左：100ピクセル（同じ）ですが、「c」は「b」の内側です。

結果として、同じ座標を使用すると、最初の場合にオフセットが得られます。どうすればそれを避けることができますか？ありがとう！

出典

2017-11-12 dimaKush

element.getBoundingClientRect は（） – dimaKush

「c」の代わりに「b」クラスを使用しようとしましたか？

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

出典

2017-11-12 11:10:41

私はこれらのクラスを変更することはできません、問題を解決しました。その問題 – dimaKush

製2スニペット。（使用位置：相対親コンテナと位置の相対子供に）

.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）提案あなたの現在の構造を持つ

1）ハード修正 、クリーナーフィックス：

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

出典

2017-11-12 12:00:23

私はそれを明確にしようとします。 "a"の内側では、 "b"はそれ自身のフィールドを持っています。一方、 "body" "c"の内部では、同じ座標を使用してキャンバス上の位置が異なります。 "c"に "body"ではなく "a"であることを伝える方法が問題ですが、実際には "c"はまだ "body"にあります – dimaKush

私は実際にもあなたの質問を理解していません。ここでベットしたのは、私が作ったスニペットです。正確にどのように描いていますか？

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

<div class="container"> 
 

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

出典

2017-11-12 12:05:28

方法（左上）の位置座標を取得するときにオフセット避けるために、内側のdiv

答えて

関連する問題