CSS : 부동 소수점 사이의 차이 : 왼쪽 및 부동 소수점 : 오른쪽

Question

position:relative 인 부모 내의 float:left과 float:right의 차이점은 무엇입니까? 내 테스트에서 div은 을 right: 0px을 사용하여 수동으로 배치하지 않는 한 부모의 왼쪽 상단 모서리에 떠 다니면서 이미지 위에 겹쳐집니다.

position:absolute과의 차이점을 볼 수 있습니다. float:left은 이미지 위에 div을 오버레이해야하며, float:right은 생략하고 오버레이 효과를 얻을 수 있습니다.

여기에 무슨 일이 일어나는지 나에게 깨닫게 해주는 사람이 있습니까?

내 문제는 jsFiddle에 나와 있습니다.

HTML :

<div class="parent"> 
    <div class="tag">Featured</div> 
    <img src="http://www.placehold.it/200x200"> 
</div> 

CSS :

.parent { 
    position:relative; 
    width: 200px; 
} 
.tag { 
    float: right; 
    position: absolute; /* can omit when using float:right */ 
    /* right: 0px; */  /* uncomment to right-align child */ 
} 

편집 :

내가 내 문에 대한 position:absolute 및 float와 착각이었다. 어떻게 든 jsFiddle을 가지고 놀 때 인상을 받았다. 혼란에 빠져서. 모든 답변을 주셔서 감사합니다.

Answer 1

position: absolute;으로 설정된 요소에 float을 사용할 수 없습니다. left: 0; 또는 right: 0;을 사용하여 position: relative; 인 부모 내부에 정렬하십시오.

또한 position: relative은 자녀의 행동을 변경하지 않습니다. float 기능을 사용할 수 없게하는 것은 position: absolute입니다. 이것이 귀하의 float: right이 왼쪽 상단에있는 이유입니다. position: absolute을 사용하면 요소가있는 위치를 명시 적으로 말하고 싶습니다. 부유물은이 역할에 적합하지 않으므로 아무 효과가 없습니다.

Answer 2

Float는 position:absolute이나 상위 하위 관계에 영향을주지 않습니다. 동일한 DOM 수준에있는 요소에만 관심이 있습니다. float:left은 엘리먼트가 왼쪽과 다른 방향으로 반올림되도록합니다. 요소에 적용 clear: both는 중지가 떠 :

http://jsfiddle.net/MUP59/

당신은 대부분의 시간을 display:inline-block를 사용하여 더 나은 이럴.

Answer 3

절대 위치 지정은 해당 요소를 정상적인 흐름에서 벗어나게합니다. 따라서 float을 사용하려고하면 .container 내에서 플로팅 할 수 없기 때문에 효과가 없습니다. 절대 위치 지정을 위해 나머지 요소를 무시하도록 지정합니다. 절대 위치 지정을 사용하면 부모 위치에 원하는 위치를 명시해야합니다. 따라서 @Francodi 솔루션은 정확합니다. 더 자세한 설명.