CODEWITHSUNDEEP
htmlcss
Andrew Python
Andrew Python

Reputation: 67

Buttons overlapping when shrinking window

I am having an issue with buttons overlapping when resizing the window of the browser. I have looked at numerous other posts about this same issue but the solutions provided didnt seem to work

I have tried absolute positioning, and have tried some other solutions but nothing seems to really work. One possible solution would have the buttons resize with the window but I am unsure how this would be done. Here is a link to a live version https://dragonknightleo.github.io/freelance.github.io/

HTML
<div class="btn">
        <button id="button-1" type="button"><h5>Andrew Carney</h5></button>
        <a href="portfolio.html"><button id="button-2" type="button"><h5 id="portfolio-home">Portfolio</h5></button></a>
        <a href="about.html"><button id="button-3" type="button"><h5 id="aboutme-home">About Me</h5></button></a>
        <a href="contact.html"><button id="button-4" type="button"><h5 id="contact-home">Contact</h5></button></a>
      </div>

CSS
#button-1 {
  position: absolute;
  top: 7.5%;
  left: 10%;
  font-family: 'Cinzel', serif;
  z-index: 2;
  background: none;
  color: #ccc;
  width: 110px;
  height: 110px;
  border: 3px solid white;
  font-style: 18px;
  transform: rotate(45deg);
  overflow-x: hidden;
  overflow-y: hidden;
}

Upvotes: 1

Views: 2361

Answers (1)

Stompy32
Stompy32

Reputation: 89

Absolutely positioned elements are positioned with regard to their closest parent that has a position: rule that isn't the default position:static value.

A common technique to handle this quirk is to set a position: relative on the direct parent of the absolutely positioned children, it won't take the parent out of flow like a float or position:absolute and you can move the children around inside the container with top, right, left and bottom.

On the .btn class you need to set the position:relative along with giving it fixed height and width properties. You need the fixed height and width because absolutely positioned elements are taken out of flow so their's nothing to expand the parent container. I just randomly picked 1000px and it seemed to work well.

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    height: 1000px;
    width: 1000px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    position: relative;
    font-size: 1rem;
    /* line-height: 1.5; */
    border-radius: .25rem;
    transition: color .15s

I remember learning this quirk with absolute positioning was a big 'ah ha' moment when I was learning positioning.

Just keep in mind that your top, bottom, left, and right values on the buttons will be in relation to the sides of the .btn div, not the viewport because of that position: relative on the parent of the buttons.

Upvotes: 2

Related Questions