나는 css를 이해하려고 노력하고 있으므로 아래 실험 코드를 가능한 한 일반적인 것으로 만들기 위해 최선을 다했다.절대 요소 다음에 상대 요소를 배치하고 부모 div를 자식에 맞게 확장하는 방법은 무엇입니까?
두 개의 상자가있는 간단한 페이지가 있습니다. Why does setting the `right` CSS attribute push an element to the left?에 따라 특정 위치에 배치해야하는 상자 중 하나가 필요했습니다. position:absolute 그러나 이제는 일부 div를 추가하려고합니다. 내 절대 div 아래에, 게다가 나는 자식 div의 크기에 맞게 확장하려면 부모 div 싶습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#outer {
position : relative;
background-color : green;
width : 500px;
height : 500px;
/* overflow : hidden; */
/* I know from working with floating elements inside divs that this works
* to cause parent divs to exand out around floating children, but this
* does not do the same thing here, it lops off the bottom of the child divs
* if I un-comment the preceding line!
*/
}
#inner {
position : absolute;
background-color : blue;
height : 400px;
width : 400px;
top : 10px;
right : 20px;
}
#top_object {
position : absolute;
top : 450px;
}
.object {
position : relative;
width : 450px;
height : 200px;
background-color : yellow;
margin-bottom : 25px;
}
/* The followsing was suggested by:
https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content
But has no effect!
*/
.clear {
clear : both;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
<div id="top_object" class="object">
Top Object
</div>
<div class="object">
Second Object
</div>
<div class="clear"></div>
</div>
</body>
</html>
. 그러나, 나는 더 많은 객체 div가 top 객체 아래로 흐르기를 원할 것이다. 즉, top_object를 사용하여 클래스 객체와 함께 div의 첫 번째 인스턴스에 대한 절대 위치를 정의한 다음 클래스 객체와 함께 divs를 자연스럽게 페이지 아래쪽으로 이동하고 의에 설정된 25 픽셀의 여백과 함께 top_object 각 개체의 top:XXXpx; 특성을 별도로 설정할 필요가 없습니다.
내 첫 번째 질문은 내 두 번째 개체가 첫 번째 개체 위에 나타나는 이유이며 relative 위치 지정된 개체가 absolute 개체 아래로 흐르게 할 수 있습니까?
둘째로 백그라운드 div를 확장하려면 어떻게해야합니까? div를 플로팅 할 때 div가 사용되지 않으면 어떻게됩니까?
또한 내 질문에 대한 직접적인 대답은 내가 왜 내가 옳은지에 대한 설명을 듣고 싶습니다. 왜 어떤 해결책이 그것을 고쳐 줄지에 대해 이해하고 있습니다. 나는 CSS의 논리를 이해하고 싶다. 문제를 해결하는 특정 코드 스 니펫을보기는 커녕 그렇게 좋을 지 모르지만!
프로그래밍 질문이 아니기 때문에 [http://webmasters.stackexchange.com/](http://webmasters.stackexchange.com/) –
에서 질문하는 것이 좋습니다. 접근. 절대 위치 지정은 생각만큼 거의 필요하지 않습니다. 예를 들어,'# top_object'를 사용하면, 상대적으로, 마진이 450px 이상인 것은 어떨까요? 왜 내면을 절대적으로 배치해야합니까? 예를 들어, 왜 'float : right;'가 될 수는 없지만 상대적으로 위치를 잡았습니까? –
좋아, 나는 그것을 시도했다. 그러나 그것은 450px만큼 모두를 움직였다. float : 상대 위치 지정으로 오른쪽으로 이동하지만 450px만큼 아래로 모든 것을 푸시합니다. –