What is the trick to getting the logo to display on the upper left of the divided background without appearing beneath it?

Question

What is the trick to getting the logo to display on the upper left of the divided background without appearing beneath it?

* { 
    margin: 0; 
    padding: 0; 
    font-family: 'Montserrat', sans-serif; 
}

.wrapper { 
    width: 1170px; 
    margin: auto; 
}

.logo img { 
    width: 84px; 
    float: left; 
    padding-left: 5%; 
    padding-top: 2%; 
}


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LoLstudy</title> <link rel="stylesheet" href="fstyle.css" /> </head> <body> <div class="container"> <div class="left"></div>

that's the code for a website layout I'm working on, what do you think of it?

html css

Answer 1

Answer №1

To adjust the layout, simply modify the position: absolute property in the .appbar class to either position: fixed or delete the position property.

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.appbar {
  width: 100%;
  height: 60px;
  display: flex;
  position: absolute;
  align-items: center;
  top: 0;
  z-index: 999;
  padding: 0 2rem;
}

.logo {
  font-size: 20px;
}

.fragment {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.left {
  background-color: cadetblue;
}

.right {
  background-color: burlywood;
}

<div class="container">
  <header class="appbar">
    <a class="logo" href="#">LOGO</a>
  </header>

  <div class="fragment left">
    <h2>Left</h2>
  </div>

  <div class="fragment right">
    <h2>Right</h2>
  </div>
</div>

Answer 2

To adjust the layout, simply modify the position: absolute property in the .appbar class to either position: fixed or delete the position property.

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.appbar {
  width: 100%;
  height: 60px;
  display: flex;
  position: absolute;
  align-items: center;
  top: 0;
  z-index: 999;
  padding: 0 2rem;
}

.logo {
  font-size: 20px;
}

.fragment {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.left {
  background-color: cadetblue;
}

.right {
  background-color: burlywood;
}

<div class="container">
  <header class="appbar">
    <a class="logo" href="#">LOGO</a>
  </header>

  <div class="fragment left">
    <h2>Left</h2>
  </div>

  <div class="fragment right">
    <h2>Right</h2>
  </div>
</div>

What is the trick to getting the logo to display on the upper left of the divided background without appearing beneath it?

Answer №1

Similar questions

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Trouble with Bootstrap 5 Padding Distorting the Aspect Ratio of Image Collection

Tips for designing a hexagonal chessboard using CSS

What are some techniques for achieving smooth edges on CSS border shapes?

Whenever the cursor hovers over, the DIV above the iframe flickers

Ways to structure a div to resemble a table

Center text inside a circle using CSS styling

Developing a placeholder directive with AngularJS

What is the best way to create a website where images align perfectly with stacked cards?

What could be the reason for the unexpected behavior of position sticky?

Is there a way to send multiple actions to Node.js via a dropdown list using POST method?

The dynamic table is too large for the bootstrap card

Preventing the elements within a div section from shifting position

Using jQuery to show text upon hover using a `for` loop

The script has been modified to add "=s1400" to the image source path, causing the image to fail to load

JavaScript: Understanding the concept of closure variables

management of vertical navigation bar on adaptable screens

Transform your current website layout from a fixed 960-grid system with 12 columns into a fluid and

Split the page in half with a background image on one side and text on the other

Email Template Concern