내가상대 위치 div가 확장되어 모든 절대 위치 div가 포함되도록하려면 어떻게해야합니까?
<body><div id="a"><div id="b">some content</div></div>more content<body>
같은 것을 가지고 내가 "어떤 내용이"가 될 것입니다 얼마나 높이 모른다 말한다. 하지만 #b 스타일로 위치를 지정했습니다. 절대 위치 스타일과 #a 스타일을 지정했습니다. #b 위치는 상대적으로 #a의 왼쪽 위 모퉁이입니다. #b가 "더 많은 콘텐츠"가 푸시 된 #b를 포함하도록 확장 할 수있는 방법이 있습니까?
감사
상대를 절대와 바꾸면이 jsFiddle처럼 원하는 것을 얻을 수 있습니다.
호 절대 위치는 문서 플로우의 요소를 제거한다. 부모 태그와 형제 태그는 절대 위치 요소가 겹쳐 있는지 여부를 알 수 없습니다.
#b의 위치 관련성이 더 나은 해결책 일 수 있습니다.
#b는 #a의 첫 번째 요소이므로 자연스럽게 #a의 왼쪽 위 모서리에 나타나므로 위치 상대는 position absolute와 같은 지점을 기준으로 위치를 지정합니다. 상대 높이와 동일한 내용의 흐름에서 블록을 잎 : 또한
는 다음 위치 때문에
#b{position:relative;top:30px;margin-bottom:30px;}
콘텐츠 #B의 바닥을 취소합니다 설정, 당신은 30 픽셀에 의해 아래로 #B 밀어 싶은 말 #b + 30px;
예 : div # b에 pos : abs가 있어야 할 필요가 없으므로 예제에는 결함이 있습니다. 기본적으로 div # a의 왼쪽/왼쪽에 요소가 설정됩니다.
CSS 위치를 사용하면 div : #b의 pos : rel을 사용하더라도 div # a의 높이 만 늘리더라도 적용된 요소는 일반 마크 업 흐름을 벗어납니다. 위치를 고려하지 않을 것입니다. 당신은 또한 그것에 적용했을 수도 있습니다.
당신이 원하는 것을 성취 할 수있는 방법이 있지만 JavaScript를 사용하는 것이 좋습니다.
# b의 위치는 # a의 위치가 아니라 원래의 위치와 관련이 있습니다. 두 위치가 동일하다는 것은 우연의 일치입니다. – Gumbo