플로트 오른쪽과 위치 절대가 함께 작동하지 않습니다

플로트 오른쪽과 위치 절대가 함께 작동하지 않습니다

---

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있다 ( '이 원 있도록 "상위 div의 오른쪽에 있어야합니다").

---

아마도 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)로 설정하십시오. 수레에 대한 자세한 정보와 사용 방법은 여기를 참조하십시오 .

---

절대 요소가 " 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>

당신은 절대 요소 가 부모 의 오른쪽에 맞춰 정렬됩니다

---

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

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>

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

참고 URL : https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together