[css] 오른쪽 부동과 절대 위치가 함께 작동하지 않습니다.

Program / 글쓴이

div가 항상 부모 div의 오른쪽에 있기를 원하므로 float:right. 효과가있다.

하지만 삽입 할 때 다른 콘텐츠에 영향을주지 않기를 원하므로 position:absolute.

이제 float:right작동하지 않습니다. 내 div는 항상 상위 div의 왼쪽에 있습니다. 오른쪽으로 이동하려면 어떻게해야합니까?

답변

사용하다

position:absolute;
right: 0;

float:right절대 포지셔닝 필요 없음

또한 상위 요소가 다음으로 설정되어 있는지 확인하십시오. position:relative;

답변

일반적으로은 float상위 컨테이너 (오른쪽 또는 왼쪽으로 부동)에 상대적인 요소의 위치를 ​​지정하기 때문에 상대 위치 지정 문입니다. 이는 절대 위치 지정 문 position:absolute이기 때문에 속성 과 호환되지 않음을 의미합니다 position:absolute. 요소를 부동화하고 브라우저가 상위 컨테이너를 기준으로 배치하도록 허용하거나 절대 위치를 지정하고 요소가 상위에 관계없이 특정 위치에 나타나도록 강제 할 수 있습니다. 당신은 절대 위치 요소가 화면 오른쪽에 표시 할 경우, 당신은 사용할 수 position: absolute; right: 0;있지만,이 요소에 관계없이 항상 부모가 어떻게 와이드 화면의 오른쪽 가장자리에 표시 발생할 수 div있다 ( ‘이 원 있도록 t는 “상위 div의 오른쪽에”).

답변

절대 요소가 ” display : inline-block “인 경우 ” translateX (-100 %) “및 ” text-align : right “를 사용할 수 있습니다 .

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

절대 요소 가 부모를 상대로 오른쪽에 정렬됩니다.

답변

아마도 float를 사용하여 다음과 같이 콘텐츠를 분할해야합니다.

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

에 주목 overflow: auto;, 이것은 당신이 당신의 용기에 약간의 높이를 가지고 있는지 확인하는 것입니다. 일을 떠 당신의 요소가 아래에 방황 수레 겹치지 않도록 보장하기 위해 DOM의 그들을 소요 컨테이너를 설정 div해야하는 overflow: auto(또는 overflow: hidden) 그 수레가 당신의 높이를 그릴 때 회계 보장합니다. 여기 에서 수레에 대한 자세한 정보와 사용 방법을 확인 하세요 .

답변

하나의 중첩 레이어와 까다로운 여백으로 오른쪽 플로팅 요소를 절대적으로 배치 할 수있었습니다.

function test() {
  document.getElementById("box").classList.toggle("hide");
}
.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}
<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

스 니펫 확장

나는 이것을 토글 가능하게하여 주변 텍스트의 흐름에 어떤 영향을 미치지 않는지 확인하기로 결정했습니다 (실행하고 버튼을 눌러 부동 절대 상자를 표시 / 숨기기).

답변