CODEWITHSUNDEEP
htmlcssposition
Jake Ball
Jake Ball

Reputation: 808

CSS Underlay a previous div

Sorry if the question is a little vague, I found it quite hard to title. Anyway, I am currently creating a new design and I have hit an issue, I basically want one div to start underneath another, as I am using rounded edges on the div before and want to cover up the whitespace.

I am able to get the div to underlay, however when I set the z-index it becomes the bottom element and the interaction with links etc can't be done. (e.g links can't be clicked, can't highlight text)

To better explain, I have created this JSFiddle link, it shows exactly what I am trying to do. Try clicking the link, it will simply not work.

The code on the JSFiddle is as follows:

#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}

#div-1 {
background-color: grey;
}

#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}

Any help is appreciated, and if you would like me to clarify anything please do ask.

Thanks,

Jake

Upvotes: 2

Views: 6294

Answers (5)

ulidtko
ulidtko

Reputation: 15570

By "underlay" I understand this:

setTimeout(componentLoaded, 2000);

function componentLoaded() {
  document.getElementById('content').hidden = false;
}
main { position: relative; }
main>.loading-underlay { position: absolute; }
main>.loading-wrapped { position: absolute; }

main>.loading-underlay {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: aqua;
  z-index: 1;
}

main>.loading-wrapped {
  max-width: 100vw;
  background-color: white;
  z-index: 2;
}
<body>
  <main>
    <h1>Some arbitrary content</h1>
    <div class='loading-underlay'></div>
    <div class='loading-wrapped'>
      <div id='content' hidden>
        <!-- e.g. some component that takes a while to load ... -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </div>
    </div>
  </main>
</body>

This allows to hook styling (animations, etc) onto div.loading-underlay — and have it showing all the while div.content gets populated. So the users sees something nice instead of blank space.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

instead using z-index-1; you should use positive z-index and tell each div where to stand.

http://jsfiddle.net/wdQWu/3/ 

#div-1, #div-2 {
    width: 350px;
    border-radius: 0 0 16px 16px;
    position:relative;
    z-index:1;
}
#div-1 {
    background-color: grey;
}
#div-2 {
    background-color: black;
    position: relative;
    z-index: 0;
    margin-top:-26px;
}

oups, little late, answer already there :)

Upvotes: 2

user1721135
user1721135

Reputation: 7092

Demo http://jsfiddle.net/Amn7S/

Dont use z-index:-1; use z-index:1; and z-index:2; then it works.

#div-1 {
    background-color: grey;
    z-index:2;
    position:relative;
}

#div-2 {
    background-color: black;
    position: relative;
    margin-top:-25px;
z-index:1;    
}

Upvotes: 4

erdimeola
erdimeola

Reputation: 854

something like this maybe ?

http://jsfiddle.net/wdQWu/1/

I've used a div with a class wrapper as you can see in the code.

.wrapper {
    width: 350px;
    border-radius: 0 0 16px 16px;
    background-color: black;
}

Hope it's useful..

Upvotes: 0

taylorc93
taylorc93

Reputation: 3716

You could change the z-index of the link to be above the 2nd div

Upvotes: 0

Related Questions