Allow specific tag to override overflow:hidden

Question

I\'ve got a

, that\'s a certain height and width, and overflow:hidden so that specfic inner images are clipped

相关标签:

Answer 1

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.

Answer 2

All the above is nice but nothing beats JAVASCRIPT. (Using jquery). So,

<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.

Answer 3

I know this is an old post, but this can be done (at least in Chrome). I figured this out about two years ago and it's saved me a couple times.

Set the child to have position of fixed and use margins instead of top and left to position it.

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

#parent {
    position: relative;
}

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

Here is an example: http://jsfiddle.net/senica/Cupmb/

Answer 4

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>

Answer 5

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>

Answer 6

You cannot, unless you change your HTML layout and move that image out of the parent div. A little more context would help you find an acceptable solution.