CODEWITHSUNDEEP
csscss-positionz-index
Klemart3D
Klemart3D

Reputation: 338

How to display an element behind a fixed parent?

Illustrated: how to display a logo contour (children of logo) behind a menu background?

The logo is part of a centered menu but not necessarily at the middle (depends of menu item names), so for me best solution is to still the contour inside the logo div like this:

<img src="background-image.jpg">
<div class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
      <div class="logo">
        <div class="contour"></div>
      </div>
    </li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</div>

What I have:

What I want:

enter image description here

I have browsed dozens of solutions for similar issues offered on stackoverflow but none seems to fit… At this point, I tried to set z-index, to move div.contour out of div.logo, to set .contour as pseudo-class :before or :after, to set a position: absolute for .contour or to play with overflow: hidden. Is there a CSS solution (without using JS)?

JSFiddle Sample here

Upvotes: 2

Views: 259

Answers (2)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

Well, you could always trick it, adding first a before pseudoelement to hide the top part of your circle and then add after pseudoelement to cover your circle with another one without border.

like this:

* {
  position: relative;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

.menu {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  background: darkcyan;
  border-bottom: 5px solid orange;
  text-align: center;
  z-index: 99;
}

.menu ul li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}

.logo {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: cadetblue;
}
.anotherclass:before {
  content:"";
  display:block;
  background-color:darkcyan;
  height:50px;
  width:110px;
  position:absolute;
      top: -16px;
    left: -5px;  
}
.anotherclass:after {
  content:"";
  display:block;
  background-color:trasparent;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: cadetblue;
  position:absolute;
  top:0px;
  left:0px; 
}

.contour {
  border: 5px solid orange;
  left: -5px;
  top: -5px;
  z-index: -1;
}
<img src="https://images.freeimages.com/images/large-previews/0b3/burning-tree-1377053.jpg" width="100%">
<div class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
      <div class="logo anotherclass">
        <div class="logo contour"></div>
      </div>
    </li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</div>

Notice I added another class to your html as you have 2 "logo" classes (parent and child). You may correct this if you like.

If you have problems with the image of your logo now, you could place it trough background-image as a property in the after pseudoelement or if you use html <img> z-index should work probably fine to place it above after pseudoelement.

Upvotes: 1

kaipahl
kaipahl

Reputation: 11

My preferred solution would be working with one background SVG for the dark and light green shape and the orange contour. That background would be centered via CSS.

That whole "contour partially around two different shaped elements" looks to me undoable with normal browser (perhaps some mask magic via CSS...)

Upvotes: 1

Related Questions