CODEWITHSUNDEEP
htmlcss
Anshuman Sinha
Anshuman Sinha

Reputation: 11

Position absolute element causing overlap

Here's the link structure of the page:

    <div>
    <h2><a href="#" target="_blank"  class="button one">Digital Marketing </a>
        <a href="#" target="_blank"  class="button one">Video Production </a> 
        <a href="#" target="_blank"  class="button one">Graphics Design </a> 
    </h2></div>

And the css:

    .button{
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: relative;
                    padding: 10px;
                    margin: 10px 20px 30px 0 !important;
}
                    
@media screen and (max-width: 800px) {
  .button {
    display:block;
      z-index:above;
  }
}

It works as intended on a screen bigger than 800px. However on my mobile device, the last link becomes unclickable as it gets overlapped with the next element on the page.

Is this an issue of CSS position attribute? How can I fix this?

Upvotes: 0

Views: 859

Answers (2)

diva_codes
diva_codes

Reputation: 39

I would try giving the top and bottom margin a value in % instead of px, then it can work out its own space and you'll avoid overlapping.

Maybe experiment a bit like so:

@media screen and (max-width: 800px) {
  .button {
    display:block;

    margin: 1% auto;
  }

And also, I don't know if you need the z-index for something you have on the page already, but you're gonna need to give it an actual value for it to work:

z-index syntax: auto|number|initial|inherit;

Upvotes: 0

Maimas2
Maimas2

Reputation: 961

As long as there are no position:absolutes, you can add a margin to the elements. This pushes other elements away from itself, by a given distance.

Upvotes: 1

Related Questions