절대 위치 및 오버플로 : 숨김

절대 위치 및 오버플로 : 숨김

---

<div id="parent" style="overflow:hidden; position:relative;">
  <div id="child" style="position:absolute;">
  </div>
</div>

부모 요소보다 더 큰 자식 요소를 표시해야하지만 overflow : hidden; 이것이 가능한가? 부모 요소에는 position:relative;자식 요소가 부모 테두리를 벗어나는 즉시 제거됩니다.

(요소에는 추가 CSS가 정의되어 있으므로 명확성을 위해 스타일 속성을 입력했습니다)

---

부모 overflow: hidden와 함께 원하는 것을하는 것은 완전히 불가능합니다 . 대신 추가 자녀를 소개하고 거기 로 이동할 수 있습니다.position: relativedivdivoverflow: hidden

참조 : http://jsfiddle.net/thirtydot/TFTnU/

HTML :

<div id="parent">
    <div id="hideOverflow">
        <div style="width:1000px;background:#ccc">sdfsd</div>
    </div>
  <div id="child">overflow "visible"</div>
</div>

CSS :

#parent {
    position:relative;
    background:red;
    width:100px;
    height:100px
}
#child {
    position:absolute;
    background:#f0f;
    width:300px;
    bottom: 0;
    left: 0
}
#hideOverflow {
    overflow: hidden
}

---

아래 코드는 매력처럼 작동합니다.

<div id="grandparent" style="position:relative;">
    <div id="parent" style="overflow:hidden;">
        <div id="child" style="position:absolute;">
        </div>
    </div>
</div>

---

나는 보통 overflow : hidden을 clearfix로 사용합니다. 이 경우 포기하고 추가 div를 추가합니다.

<div id="parent" style="position:relative;">
  <!-- floating divs here -->
  <div id="child" style="position:absolute;"></div>
  <div style="clear:both"></div>
</div>

---

CSS 사용 ...

* {margin: 0; padding: 0;}

#parent {width: auto; overflow: hidden;}

#child {position: absolute; width: auto;}

너비 자동을 사용하면 항상 가능한 가장 작은 크기에 추가됩니다. 재설정하면 자연스러운 흐름을 유지하는 데 도움이됩니다.

그러나 아이가 어떤 식 으로든 부모보다 크면 불가능합니다. 그러나이 CSS를 사용하면 가능한 한 최대로 원하는 것을 얻을 수 있다고 생각합니다.

---

thirtydot의 솔루션은 실제로 좋은 생각입니다.

다음은보다 명확한 예입니다. http://jsfiddle.net/y9dtL68d/

HTML

<div id="grandparent">
    <div id="parent">
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
    </div>
    <div id="child">
        dudes
    </div>    
</div>

CSS

#grandparent {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px;
    background: #d0d0d0;
}
#parent {
    width: 150px;
    height: 150px;
    overflow:hidden;
}
#child {
    position: absolute;
    background: red;
    color: white;
    left: 100%;
    top: 0;
}

---

나는 모든 프론트 엔드 개발자가 적어도 한 번은 이러한 상황에 직면했다고 생각합니다. 무언가를 절대 위치시켜야한다고 가정 해 봅시다. 그리고 나서 그것을 어떤 방향으로 움직이려고하면 붐이 사라집니다. 부모가 넘치도록 설정되어 있다는 것을 잊었습니다. 이를 수행하는 CSS 트릭. 아래 데모 예제를 찾으십시오 ...

<br><br><br>
<div class="grand-parent">
  <div class="parent">P
    <div class="child">child</div>
  </div>
</div>
css code:


.grand-parent {
  width:50px;
  height:50px;
  position:relative;
  background-color: grey;
}
.parent {
  width:10px;
  height:30px;
  overflow:hidden;
  background-color: blue;
}
.child {
  position:absolute; 
  width:50px;
  height:20px;
  background-color: red;
  top:-10px; 
  left:5px;
}

---

아주 간단한 방법으로

<div class="rootparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

.rootparent {
  position:relative;
  border:1px solid #ccc;
  width:150px;
  height:150px;
}
.parent {
  overflow:hidden;
}
.child {
   position: absolute;
   top: -10px;
   right: -15px;
   width: 30px;
   height: 30px;
   border: 1px solid red;
}

Here is jsfiddle link

ReferenceURL : https://stackoverflow.com/questions/5513382/absolute-position-and-overflowhidden