CODEWITHSUNDEEP
htmlcsshoveroverflow
Maximus Dredoff
Maximus Dredoff

Reputation: 306

What's goin' on with img's overflow?

When I hover the icon img's overflow changes. All the code you can find here: https://jsfiddle.net/DTcHh/12122/

just hover the icon

P.S. I couldn't use z-index:-1, because part of my img goes under header's background... here is screen: https://monosnap.com/file/vfivmX7MGJl8bobULiipeToilyTZIx

styles for header: 

.header {
  background: url("../img/background.png") 100% 100%;
  background-size: cover;
  max-width: 1920px;
  max-height: 900px;
  color: white;}

Upvotes: 0

Views: 45

Answers (2)

Anshul Bisht
Anshul Bisht

Reputation: 1654

Remove the position: relative;.
.avatar img { vertical-align: bottom; }

If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be.

There are two things that happen when you set position: relative;. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The 2nd thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.

Upvotes: 1

sahil gupta
sahil gupta

Reputation: 2349

Just remove position: relative; from the CSS of img

.avatar img {
    vertical-align: bottom;
    position: relative; //remove this style
  }

Upvotes: 1

Related Questions