CSS 위치 상대

Question

이전 요소와 관련된 텍스트를 배치하려고합니다. 그래서 4 박스와 1 컨테이너, 첫 번째와 두 번째 요소가 작동하지만 문제가 시작됩니다. 각 행에 2 개의 상자가있는 2 개의 행으로되어 있습니다.

Box1 | Box2 Box3 | Box4

하지만 Box3은 예상대로 표시되지 않습니다.

http://homeweb.mah.se/~M09K0291/test.htm

크롬에서 나는 실제 상자 아래 상자 3에서 세 번째 상자가 네 번째 상자 뒤에 IE의 텍스트를 얻는다.

아이디어가 있으십니까? 단지 .page1에 position: relative 세트로 절대 위치를 사용하려면

Answer 1

div.c { 
clear:left; 
position:relative; 
top:-100px; 
} 

div.d { top:-200px; } 

Answer 2

당신은 어쨌든 상자에 대한 명시적인 높이와 너비를 정의하고 있기 때문에, 그것은 아마 더 명확하고 강력합니다.

.page1 { position: relative; } 
.a, .b, .c, .d { position: absolute; } 
.a { top: 0; left: 0; } 
.b { top: 0; left: 100px; } 
.c { top: 100px; left: 0; } 
.d { top: 100px; left: 100px;} 

참조 : http://jquery.nodnod.net/cases/597

편집 : 당신은 절대 위치를 사용하거나 top 및 left을 피하려고하지 않으려면

, 당신은 또한 사용할 수 있습니다 예를 들어

수레와 지우기 :

.a, .b, .c, .d { float: left; } 
.a, .c { clear: left; } 

요 또한 .page1에 대해 clearfix 같은 것을 통해 float 지우기를 적용해야합니다.

은 참조 : http://jquery.nodnod.net/cases/598

Answer 3

위치의 상대 위치가 정상적으로 될 것 위치로 요소의 상대적인 위치를 설정합니다. 요소는 문서의 흐름에서 벗어나지 않으므로 하나를 이동하면 요소 뒤에 위치 지정에 영향을줍니다.

포함 블록에 상대적인 절대 위치를 지정합니다. 요소는 문서의 흐름에서 가져와 하나를 움직이면 페이지의 다른 요소에 영향을주지 않습니다. 만약 위치를 사용하는 경우, 상대 positoning

를 사용

예 요소는 위쪽 및 왼쪽으로 이동한다.

div.fyrkant 
{ 
    height: 100px; 
    width: 100px; 
    position:relative; 
} 
div.a 
{ 
    background-color: #b5e274; 
} 
div.b 
{ 
    background-color: #e2d974; 
    left: 100px; 
    top:-100px; 
} 
div.c 
{ 
    background-color: #e2b074; 
    top: -100px; 
} 
div.d 
{ 
    background-color: #e27e74; 
    top: -200px; 
    left: 100px; 
} 

위쪽 및 왼쪽을 사용하지 않으려면 수 평형을 사용하여 조사하고이 문제를 해결해야합니다.

예 사용 수레

는 가장 좋은 크로스 브라우저 솔루션은 HTML 마크 업을 추가 포함하는 것입니다. 원하는 것은 2 행의 블록으로, 각 행을 div로 둘러 쌉니다.

<div class="page1"> 
    <div class="row"> 
     <div class="a fyrkant">test a 
     </div> 
     <div class="b fyrkant">test b 
     </div> 
    </div> 
    <div class="row"> 
     <div class="c fyrkant">test c 
     </div> 
     <div class="d fyrkant">test d 
     </div> 
    </div> 
</div> 

는 그런 다음 CSS에

div.fyrkant 
{ 
    height: 100px; 
    width: 100px; 
} 
.row {overflow:hidden;zoom:1;} 
.a, .b, .c, .d { float: left; } 

오버 플로우를 추가하십시오 셀에만이 블록을 포함하고 있으므로 숨겨진는 수레를 지 웁니다. 행이없는 경우 행에 높이가없고 행이 같은 행에 있습니다. overflow : hidden은 ie6에서는 작동하지 않지만 zoom : 1은 (haslayout을 호출합니다.)