특정 태그가 overflow : hidden을 재정의하도록 허용

특정 태그가 overflow : hidden을 재정의하도록 허용

---

나는 <div>, 그것은 특정 height및 width, overflow:hidden그래서 특정 내부 이미지가 잘립니다. 그러나의 하나의 이미지가 <div>테두리 밖으로 튀어 나오길 원합니다 (예 : 재정의 overflow:hidden). 어떻게해야합니까?

---

트릭은 overflow:hidden요소 를 유지하고 position:static상위 요소가 아닌 상위 상위 요소를 기준으로 오버플로 요소를 배치하는 것 overflow:hidden입니다. 이렇게 :

.relative-wrap {
    /*relative on second parent*/
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
    
    /*no relative on immediate parent*/
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}

<div class="relative-wrap">
    
    <div class="overflow-wrap">
        
        <div class="respect-overflow">
        
        </div>
        <div class="no-overflow">
            
        </div>
        
    </div>
    
</div>

또한 이러한 방식으로 요소가 컨테이너를 오버플로하도록하려는 매우 일반적인 사용 사례는 드롭 다운 또는 컨테이너의 높이를 X에서 0으로 애니메이션화하여 컨테이너에 있어야 overflow: hidden하는 경우입니다. 일반적으로 컨테이너 내부 에는 오버플로를 원하는 것이 있습니다. 이러한 요소는 컨테이너가 "열려"있을 때만 액세스 할 수 있으므로 컨테이너가 완전히 열린 visible 후 오버플로를 다시 설정 hidden하고 컨테이너를 다시에 애니메이션화하기 전에로 다시 설정할 수 height: 0있습니다.

---

나는 이것이 오래된 게시물이라는 것을 알고 있지만 이것은 적어도 Chrome에서 할 수 있습니다. 나는 약 2 년 전에 이것을 알아 냈고 그것은 저를 몇 번 구했습니다.

아이가 고정 된 위치를 가지도록 설정하고 위쪽과 왼쪽 대신 여백을 사용하여 위치를 지정합니다.

#wrapper {
    width: 5px;
    height: 5px;
    border: 1px solid #000;
    overflow: hidden;
}

#parent {
    position: relative;
}

button {
    position: fixed;
    margin: 10px 0px 0px 30px;
}

예 : http://jsfiddle.net/senica/Cupmb/

---

나를 위해 만족스럽지 않은 모든 대답. 제 생각에는 모두 엉망이고 복잡한 레이아웃으로 구현하기가 어렵습니다.

여기에 간단한 해결책이 있습니다.

부모가 특정 오버플로를 가지면 자식이이를 무시하도록 할 수 없습니다.

자식이 부모 오버플로를 재정의해야하는 경우 자식은 다른 자식과 다른 오버플로를 가질 수 있습니다.

따라서 부모 에 대해 선언하는 대신 각 자식에 대한 오버플로를 정의 하십시오 .

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                title
            </div>

            <div>                     
                some content
            </div>
        </div>    
    </div>  
</div>

.outer {
    position: relative;
    overflow: hidden;
}    

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

다음은 바이올린입니다.

http://jsfiddle.net/ryojeg1b/1/

---

HTML 레이아웃을 변경하고 해당 이미지를 상위 div 밖으로 이동하지 않는 한 할 수 없습니다. 좀 더 많은 컨텍스트가 허용되는 솔루션을 찾는 데 도움이됩니다.

---

당신의 랩 overflow: hidden div서로 div의 CSS 속성을 가지고 그 -

transform: translate(0, 0);

특정 태그에서-를 재정의하려면- overflow: hidden로 설정하십시오.

position: fixed; 계속해서 상위에 상대적으로 위치 할 것입니다.

즉-

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

여기에서 바이올린을보십시오

---

다른 div로 래핑하여 div에서 요소를 오버플로 한 다음 이미지를 position : absolute로 설정할 수 있습니다. 여백을 사용하여 오프셋합니다.

<div class="no-overflow">
<div>
<img class="escape" src="wherever.jpg" />
</div>
</div>

.no-overflow{
overflow:hidden;
width: 500px
height: 100px
}

.escape{
position: absolute;
margin-bottom: -150px;
}

예제 (firefox + IE10에서 테스트 됨) http://jsfiddle.net/Ps76J/

---

위의 모든 것이 좋지만 이길 수는 없습니다 JAVASCRIPT. (사용 jquery). 그래서,

<script>
var element = $('#myID');
var pos = element.offset();
var height = element.height(); // optional
element.appendTo($('body')); // optional
element.css({
    position : 'fixed'
}).offset(pos).height(height);
</script>

What I do is, get the original position of the element (relative to the page), optionally get the height or width, optionally append the element to the body, apply the new css rule position : fixed and finally apply the original position and optionally width and height.

---

There is currently no way I am aware of to make a parent node with overflow hidden have children visible outside it (with the exception of position:fixed children).

HOWEVER, it is possible to instead of using overflow, you can just use the outline property set to the color of the background combined with the z-index property to mask some elements while retaining others like so.

.persuado-overflow-hidden {
 /*gives the appearance of overflow:hidden*/
  z-index: -100;
  position: relative;
  outline: 1000vw solid white;
  overflow: visible;
}
.overridevisible {
/*takes the element out of the persuado overflow hidden*/
  z-index: 1;
}
/*does the other styling to the text*/
.loremcontainer {
  width: 60vw;
  height: 60vh;
  margin: 20vw;
  border: 1px solid;
}
.loremtxt {
  width: 100vw;
  height: 100vh;
  margin: -20vh;
  z-index: -1;
}
.positionmessage {
  z-index: 100;
  position: absolute;
  top: -12vh;
  left: -5vw;
  right: -5vw;
  color: red;
}

<div class="persuado-overflow-hidden loremcontainer">
<div class="loremtxt">
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec.
</div>
</div>

---

overflow refers to the container not allowing oversized content to be displayed (when set to hidden). It's got nothing to do with inner elements that can have overflow:whatever, and still wont' be displayed.

---

Z-index doesnt seem to work, but here I have a workaround which worked fine for me, as I needed overflow only to be "visible" when hovering a child element:

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

---

I've got a super-easy solution to this problem: Use the "pre" tag. I know the pre tag is the equivalent of using "goto" in programming, but hey: it works!

<div style="overflow: hidden; width: 200px;">
  <pre style="overflow: auto;">
    super long text which just goes on and on and on and on and one, etc.
  </pre>
</div>

참고URL : https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden