나는 3 개 요소를 가지고 #app, #main-section내부에 그 #app, 그리고 #magazine-detail그 내부입니다 #main-section. 이 위치 로 설정되어 있을 때 #magazine-detail내부 위치를 지정하려면 어떻게해야하나요 : 상대; 및 위치로 설정된다 : 절대;?#magazine-section#app#magazine-detail
이것은 CSS입니다.
#app {
position: relative;
height: 100%;
width: 100%;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
}
전체 html이 너무 커서 짧은 버전을 게시하고 있습니다. 그림을 얻을 수 있기를 바랍니다.
<div id="app">
...
<div id="main-section">
...
<div id="main-section">
...
</div>
</div>
</div>
#magazine-detail 30px의 하단에서 위치를 지정해야 합니다 main section. 나는 그것을 위치로 배치하려고 시도했다 : 절대적으로 다음과 같이 제안 된 것처럼 :
#magazine-detail {
position: absolute;
bottom: 30px;
}
그러나 요소는 어떻게 든 상단에서 30px 위치에 있었습니까?
다음은 html입니다.
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
귀하 #app는 상대적이며 main-section에 대해 절대적입니다 app. 문제는 CSS에서 magazine-detail절대로 설정 하면 main-section.
다음은 작동하는 샘플입니다.
#app {
position: relative;
height: 400px;
width: 200px;
padding: 5px;
border: 2px solid red;
}
#main-section {
position: absolute;
height: 80%;
width: 80%;
padding: 5px;
border: 1px solid black;
top: 15px;
left: 15px
}
#magazine-detail {
position: absolute;
width: 50%;
height: 50%;
border: 1px dotted green;
bottom: 30px;
}<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다