내부 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 픽셀; 왼쪽 : 예상 100 픽셀
:

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

좌표 : 최고 : 100 픽셀; 왼쪽 : 100px (동일), "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

제작 두 조각; (사용 위치 : 상대 부모 컨테이너 및 위치에 : 상대 아이들에)

.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"에게 그가 "몸"에있는 것이 아니라 "a"에 있다고 말하는 것이 문제이지만, 실제로 "c"는 여전히 "몸"에 있습니다. – 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

답변

관련 문제