Trouble with positioning elements

后端未结

关注

 2  1666

In my page i\'m having trouble with getting the right position with my element outside of the header div. I want it to automatically position after/below the div not inside it.<

相关标签:

2条回答

时光说笑

2021-01-29 02:26

The element .header has been removed from the natural document flow, so the space it had occupied before is no longer occupied - consider this element as no longer part of or interacting with sibling elements. This is why the h1 element appears to be "inside" of this element, it is actually below it.

To resolve this common issue, you would need to account for the space (height) this absolutely positioned element would've taken in the DOM had it remained part of the normal document flow.

In this particular instance, this value is dynamic; the height of the element will vary, you will need to use relative length values as well (like percentage values) to offset this space.

Consider declaring margin or padding properties on the appropriate element. In this case, the better option would probably be declaring a padding-top property on the body element, e.g:

body {
    padding-top: 25%; /* adjust accordingly to suit requirements */
}

Note: if necessary, experiment with adjusting this property value accordingly for various resolutions using @media queries

Code Snippet Demonstration:

/* Additional */
body {
    padding-top: 25%; /* adjust accordingly to suit requirements */
}

.header {
  left: 0;
  top: 0;
  height: 50%;
  position: fixed;
  right: 0;
  z-index: -1;
}

.pic1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.menu {
  float: right;
  margin-right: 30px;
  margin-top: 10px;
}

.font {
  color: gray;
  text-decoration: none;
  font-size: 20px;
}

h1 {
  color: black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Gesällprov</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="header">
    <div class="menu">
      <a class="font" style="margin-right:30px" href="">HOME</a>
      <a class="font" style="margin-right:30px" href="">SHOP</a>
      <a class="font" style="margin-right:30px" href="">ABOUT US</a>
      <a class="font" style="margin-right:30px" href="">CONTACT</a>
    </div>
    <img class="pic1" src="https://placehold.it/800x225" alt="fake.jpg">
  </div>
  <h1>test</h1>
</body>

</html>

0 讨论(0)

野性不改

2021-01-29 02:32
Just using margin-top

HTML:
```
<div class="content">
    <h1>test</h1>
</div>
```
CSS:
```
.content{
    margin-top:32px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...