I'm trying to add a TikTok logo to the top right of the page. I think the culprit is "display: flex" but if I remove it, my other texts get messed up. How do I move the TikTok logo to the top right of the page? Thanks in advance for your help!

Current state

.hero {
  width: 100vw;
  height: 88vh;
  display: flex;  /*messes up placement of tiktok logo */
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Background styles */
  background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(xxx);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;   
}

<div class="hero">
    <!--Header-->
    <div class="header">
        <a class="social-icon-header" href="https://www.tiktok.com/@">
            <img class="tiktok-logo" src="images/tiktok_logo_png_transparent512 (1).png">
        </a>
    </div>

    <div class="overlay">
        <h1> Get clear skin! </h1>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Update

Oh. I got it wrong. My mistake. I was too quick there. I thought you wanted it to look like the picture (https://i.stack.imgur.com/mU5wG.jpg). That the logo is slightly offset downwards. Then my solution would be the right one.

But at the top right, it's position:absolute;. Just like @saravanapriyan has already answered correctly.

.social-icon-header{
  position:absolute;
  top:1em;
  right:1em;
}

original answear

One quick solution would be to assign margin-top to the logo.

.header { margin-top: 70px; }

.hero {
width: 100vw;
height: 88vh;
display: flex;  /*messes up placement of tiktok logo */
justify-content: center;
align-items: center;
text-align: center;

/* Background styles */
background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(xxx);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;   

}

.header {
  margin-top: 70px;
}

<div class="hero">
    <!--Header-->
    <div class="header">
        <a class="social-icon-header" href="https://www.tiktok.com/@">
            <img class="tiktok-logo" src="https://via.placeholder.com/50/000">
        </a>
    </div>

    <div class="overlay">
        <h1> Get clear skin! </h1>
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try position:absolute for placing items over existing layout.

.hero {
width: 100vw;
height: 88vh;
display: flex;  /*messes up placement of tiktok logo */
justify-content: center;
align-items: center;
text-align: center;

/* Background styles */
background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(xxx);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;   
position:relative;
}
.social-icon-header{
  position:absolute;
  top:1em;
  right:1em;
}

<div class="hero">
    <!--Header-->
    <div class="header">
        <a class="social-icon-header" href="https://www.tiktok.com/@">
            <img class="tiktok-logo" src="images/tiktok_logo_png_transparent512 (1).png">
        </a>
    </div>

    <div class="overlay">
        <h1> Get clear skin! </h1>
    </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

.header div is not needed if there's only one icon.

if more icons will be placed, replace .social-icon-header selector with .header