CODEWITHSUNDEEP
htmlcss
nickfindley
nickfindley

Reputation: 310

Link behind another element's padding is not clickable

enter image description here

The "complete our submission form" link behind the padding (green) can't be clicked.

The reason for all of the padding (and an equal negative margin) is to compensate for a fixed top navbar when one jumps to an anchor in a long list.

I've tried messing with z-index but that doesn't seem to do anything. Any thoughts?

h3.place-category {
  margin-top: calc(-93px + -1rem);
  padding-top: calc(93px + 1rem);
}

.places-complete-list {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}
<div class="container">
  <section class="places-content">
    <p>...</p>
    <p>... To add a place please <a href="/places/submit/">complete our submission form</a>.</p>
  </section>
  <section class="places-complete-list">
    <h3 class="place-category" id="antique-shops"><a href="/places/category/antique-shops/">Antique Shops</a></h3>
    <ul>
      <li>...</li>
    </ul>
  </section>
</div>

Upvotes: 1

Views: 1178

Answers (2)

Ahmed I. Elsayed
Ahmed I. Elsayed

Reputation: 2110

Here, have a look

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Upvotes: 1

ezakto
ezakto

Reputation: 3194

Add z-index (1, 10, or whatever works for you) to .places-content. Also, add position: relative to let z-index take effect.

Upvotes: 7

Related Questions