<style type="text/css">
.a {
border: 1px solid #000;
position: relative;
}
.b {
background: #F93;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="a">
<div class="b">test</div>
</div>
높이가 자동으로 크기 조정되지 않습니다 (b는 흐름이 큼). 그러나이 문제를 해결하려면 CSS가 아닌 자바 스크립트를 사용하십시오.Div가 절대 콘텐츠 div로 자동 크기 조정을 수행하지 않습니다.
"float : left; 두 클래스 다. 그러나 시험하지 않았다. 브라우저에서 테스트 중이십니까?
a-div 크기를 볼 것으로 예상되면 뭔가 오해했다고 생각합니다. 요소를 절대로 설정하면 "렌더링 흐름"에서 벗어나므로 페이지의 다른 요소와 간섭하지 않습니다.
예, 맞습니다, B가 흘러갔습니다. 이제 위치를 추가합니다 : a에 상대적으로, b 레이아웃으로, css로 모든 방법으로이 문제를 해결할 수 있습니까? –
당신이 달성하고자하는 것이 확실하지 않지만, Greg의 해결책은'position : absolute'를 제거하고'left'와'top' 대신'margin-left'와'margin-top'을 설정하는 것입니다. . 그런 식으로, b-div는 a-div의 크기를 결정합니다. – peirix
div b가 절대 배치되어있는 경우 더 이상 '내부'로 간주되지 않습니다. 왜냐하면 내부에 렌더링되지 않기 때문입니다.
은 그래서 당신은 컨테이너가 포함 크기를 조정하지 않습니다 이유는 일반 문서 흐름 외부 사업부를 취하고 position: absolute을 설정 ... DIV B가 크거나 smalller 얻을 수로 크기를 조정하지 않습니다
당신은 css로 해결할 수 없다는 것을 의미하지만, js –
예, CSS로만 가능하지는 않습니다 ... – NDM
를 div에 그것.
margin-top: 50px; margin-left: 50px;을 대신 설정 하시겠습니까?
하지만이 방법은 장담하지 않습니다. 높이가 알려지지 않았거나 크기가 너무 크면 당신은 margin-top, js can의 크기를 조정해야하지만 CSS는 할 수 없습니다. 고마워. –
절대 위치 지정 모델에서 상자는 해당 포함 블록에 대해 명시 적으로 옵셋됩니다. 그것은 정상적인 흐름에서 완전히 제거됩니다 (나중에 형제에게 영향을 미치지 않습니다). 절대적으로 배치 된 상자는 정규 흐름 하위 및 절대적으로 (그러나 고정되어 있지 않은) 위치 된 하위에 대한 새로운 포함 블록을 설정합니다. 그러나 절대적으로 배치 된 요소의 내용은 다른 상자 주위로 흐르지 않습니다. 중첩되는 상자의 스택 수준에 따라 다른 상자의 내용을 모호하게 만들 수 있습니다. Absolute positioning
당신이 위치에 사업부가있는 경우 : 상대를, 당신은 내부에 절대 요소를 제어 할 수 있습니다
은 다음 설명서를 참조하십시오. 사실, 절대 Div는 위에서 언급 한 그렉과 같은 정상적인 문서의 흐름을 벗어났습니다. 나는 당신이 b의 왼쪽 위를 설정하고, 너비를 60px로 설정했다면 이것을 보게됩니다. <div class="b">이 (가) 상위 상자 외부에 있습니다. 이것은 절대적인 요소가 작동하는 방식입니다.
모든 현대적인 브라우저 –