Position a section of the layout below a FIXED header

Asked

Viewed 2,403 times

2

-> I have a layout whose header is fixed at the top.

-> Only that the Section just below is below it and does not follow the same flow(normal)

In this case what is the best way to make the below Section stay below the header?

1) Using position:relative top:px until Section exits below header?

2) Placing an empty div with the same header height before Section?

css positioning
  • 1

    If both solutions work, there is no better one. But I didn’t quite understand the first option, the top should not be positive?

  • Yes, travel, it is the custom to use more negative

  • @bfavaretto, resalva: The ideal is to use margin-top and not position + coordinate because the position should influence the size of the post header Section. Otherwise everything that comes after the first Section will have to be positioned tb.

  • 1

    It’s true. Why don’t you take that as an answer? ;)

  • @bfavaretto good idea :)

2 answers

3

Usually I use the padding-top on the tag body with the same height as the element, which in this case is, div.header.

Ex.:

body{
  margin:0;
  padding-top: 60px;
}

.header{
  height: 60px;
  background-color: #000;
  color: #fff;
  width: 100%;
  position:fixed;
  top:0
}
<div class="header">
  Cabeçalho
</div>
<section>
  <h1>Conteúdo</h1>
</section>

Take this example http://getbootstrap.com/examples/navbar-fixed-top/

  • Putting padding-top is the best option really or else using the margin-top in the first section

2

The ideal is to use margin-top and not position + coordenada because the position should influence the size of the section post header. If not everything that comes after the first header section (post-header) will also have to be positioned as well.

Browser other questions tagged css positioning

You are not signed in. Login or sign up in order to post.