CODEWITHSUNDEEP
htmlcss
ARTLoe
ARTLoe

Reputation: 1799

HTML CSS Div overlapping absolute & relative position

For my contact page, i have created a nav with li contents (e.g., home, about us, blog etc), i have a main div '.contact_header' which contains '.contact_header_cover' & contact_nav_list

<div class='contact_header'>
  <div class='contact_header_cover'></div>
  <div class='contact_nav_list'>
    <ul>
       <li><%= link_to "Home", '#' %></li>
       <li><%= link_to "About us", '#' %></li>
       <li><%= link_to "Blog", '#' %></li>
    </ul>
  </div>
</div

  1. i am overlapping 2 divs the '.contact_header_cover' (a light green background) & '.contact_nav_list' but in doing so i am unable to click the ul>>li links

  2. For the the class '.contact_header' i gave it a position:relative

  3. For the the class '.contact_header_cover' i gave it a position:absolute

  4. For the the class '. contact_nav_list' i gave it a position:absolute & z-index:1;

CSS Problem: with trying to overlap the divs i am unable to click on my li links (home, about, blog etc) below are my HTML & CSS content

CSS file
.static_background_img {
  background: url("img-bkground-image-staticpg.png");
  height: 100%;
  padding: 0px;
}

.contact_header {
  height: 100%;
  padding: 0px;
  position: relative;
}

.contact_header_cover {
  height: 100%;
  background-color: #3D8E58;
  opacity: 0.2;
  position: absolute;
  left: 0;
  right: 0;
}

.contact_nav_list {
  padding: 35px;
  z-index: 1;
}

.contact_nav_list ul {
  margin-bottom: 0px;
}

.contact_nav_list ul li {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 200;
  color: #aaa3a4;
}



HTML file
<div class="medium-12 columns static_background_img">
  <div class="home_line"></div>
  <nav>
    <div class="medium-12 columns contact_header">
      <div class="contact_header_cover"></div>
      <div class="contact_nav_list">
        <ul class="inline-list left">
          <li><%= link_to "logo", '#' %></li>
        </ul>
        <ul class="inline-list right">
          <li><%= link_to "Home", '#' %></li>
          <li><%= link_to "About", '#' %></li>
          <li><%= link_to "Blog", '#' %></li>
          <li><%= link_to "Contact us", '#' %></li>
          <li><%= link_to "Privacy", '#' %></li>
          <li><%= link_to "Terms", '#' %></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="medium-12 columns contact_content"> content info</div>
</div>

Upvotes: 0

Views: 486

Answers (3)

TomMonTom
TomMonTom

Reputation: 45

z-index must have a position code tag such as position:relative; for it to activate so place that line of code in .contact_nav_list. Specify z-indexes for each class which has an attribute position. Use the z-index css code (z-index:1; in .contact_header_cover, z-index:0; in .contact_header and z-index 3 for the list) It should tidy up the position of relative div containers. I can recreate an exact piece of code to place in if this explanation is too jumbled.

Upvotes: 0

Michelangelo
Michelangelo

Reputation: 5948

See the fiddle: http://jsfiddle.net/arwwtLup/

.contact_nav_list ul {
  position:absolute;
  margin-bottom: 0px;
}

Give this an absolute position and it will work. You will have to position it to your likings :)...

Upvotes: 0

Rapti
Rapti

Reputation: 2662

Try pointer-events: none; on contact_header_cover. This will pass any mouse events to the underlying elements as if it were not there.

Upvotes: 2

Related Questions