CODEWITHSUNDEEP
htmlcss
Filip
Filip

Reputation: 45

Trouble with positioning elements

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.

I guess that the "position: fixed" is ruining the document flow, is there any way around that so i don't need to use it? The Reason i use it is because i want a header background image.

I feel really stupid not solving this on my own.

Can i get your help?

HTML and CSS CODE:

.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: yellow;
}
<!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="pic1.jpg" alt="fake.jpg">	
		</div>
		<h1>test</h1>
    </body>
</html>

Upvotes: 0

Views: 81

Answers (2)

Npzy
Npzy

Reputation: 18

Just using margin-top

HTML:

<div class="content">
    <h1>test</h1>
</div>

CSS:

.content{
    margin-top:32px;
}

Upvotes: -1

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

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>

Upvotes: 2

Related Questions