position: fixed child image - overflow: hidden not work

Question

I need to make an image invisible outside parent div (image are bigger than parent div), without changing position: fixed. Why overflow: hidden not working?

Thank for any advice!

.wrap {
  height: 100;
  width: 100;
  background-color: #8087af;
  position: fixed;
  z-index: 1031;
  top: 0;
  overflow: hidden;
}
.image {
  position: fixed;
  left: 50;
  top: 50;
  z-index: 1032;
}

<div class="wrap">
  <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
</div>

When you use position:fixed, an item to be removed from the flow, dont use it in class="image" — Alex, Aug 19 '17 at 09:46
You cant use overflow hidden property with fixed elements. It becomes irrelevant since for position fixed the relative element is viewport and not the parent element. — Kiran Dash, Aug 19 '17 at 09:53
Possible duplicate of [parent & child with position fixed, parent overflow:hidden bug](https://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug) — Nisse Engström, Aug 19 '17 at 11:58

score 2 · Answer 1 · edited Aug 19 '17 at 10:58

You cant use Overflow hidden with fixed elements.

For an element with fixed positioning, viewport becomes the relative element and not the parent element. That's why parent's overflow hidden property becomes irrelevant.

I would suggest that you use position absolute and relative properties to achieve your result and then may be add another wrapper on top of it to fixed position the entire thing.

I hope the result below is what you were expecting.

#wrapper {
  position: fixed;
  top:0;
  left:0;
}
.wrap {
  height: 100px;
  width: 100px;
  background-color: #8087af;
  position: relative;
  z-index: 1031;
  overflow: hidden;
}
.image {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 1032;
}

<div id="wrapper">
  <div class="wrap">
    <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
  </div>
</div>

You are welcome Moodware. And if any of this answer solves your issue here then please mark the answer as correct so that other users with similar issues will get benefited by it. — Kiran Dash, Aug 20 '17 at 06:36

score 0 · Answer 2 · answered Aug 19 '17 at 09:54

overflow:hidden working when you remove property position:fixed in image tag

#wrapper {
 position: fixed;
 top:0;
 left:0;
}
.wrap {
    height: 100px;
    width: 100px;
    background-color: #8087af;
    position: relative;
    z-index: 1031;
    overflow: hidden;
}
.image {        
    left: 50px;
    top: 50px;
    z-index: 1032;
}

<div id="wrapper">
<div class="wrap"><img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image"></div>
</div>

score 0 · Answer 3 · edited Aug 19 '17 at 13:07

Remove position: fixed from class ="image", because When you use position:fixed, an item to be removed from the flow. when your div have fixed position his childs already are fixed to the window, but when you use fixed position to childs, you remove it from this parent.

.wrap {
  height: 100;
  width: 100;
  background-color: #8087af;
  position: fixed;
  z-index: 1031;
  top: 0;
  overflow: hidden;
}
.image {
  position: fixed; // no need this, use relative or absolute instead
  left: 50;
  top: 50;
  z-index: 1032;
}

<div class="wrap">
  <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
</div>

score 0 · Answer 4 · edited Aug 19 '17 at 11:20

You have not define div height or width with any unit(px or %) that's why ur code is not working properly

.wrap {
  height: 100px;
  width: 100px;
  background-color: #8087af;
  position: fixed;
  z-index: 1031;
  top: 0;
  overflow: hidden;
}
.image {
  left: 50px;
  top: 50px;
  z-index: 1032;
}

<div class="wrap">
  <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
</div>

score -1 · Answer 5 · answered Aug 19 '17 at 09:46

-1

<html>
<head>
    <style>
        .wrap {
            height: 400px;
            width: 700px;
            background-color: #8087af;
            position: fixed;
            z-index: 1031;
            top: 0;
            overflow:hidden;
            
        }
        .image {
            position: fixed;
            left: 30px;
            top: 20px;          
           
        }
    </style>
</head>
<body>
    <div class="wrap"><img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image"></div>
</body>
</html>

answered Aug 19 '17 at 09:46

devadinesh

137
3
13

You should really provide insight into what you've changed. A block of code doesn't explain anything. – PTD Aug 19 '17 at 09:52
In your code you can not put the tag img in the div,senselessly – Alex Aug 19 '17 at 09:53

position: fixed child image - overflow: hidden not work

5 Answers5