3 CSS positioning & floating

CSS Position:

static positioning:

The default value of the HTML element, there is no positioning, the element appears in the normal In the stream

Statically positioned elements will not be affected by top, bottom, left, right

Fixed positioning: p>

The position of the element is fixed relative to the browser window

Even if the serial port scrolls the element does not scroll

Note:

  • Fixed positioning needs to be described under IE7 and IE8! DOCTYPE can support
  • Fixed The location has nothing to do with the document flow, so it does not take up space
  • Fixed positioning element overlaps with other elements.
p.pos_fixed

{
position:fixed;
top:30px;
right:5px;
}

Relative positioning:

The positioning of relative positioning elements is Relative to its normal position, it is often used to absolutely position the container block of the element

share picture

Absolute positioning:

The absolutely positioned element is relative to the nearest positioned parent Element, if there is no positioned parent element, then its position is relative to <.html>

position:absolute;

Note:

  • Absolutely positioning makes the position of the element independent of the document flow, so it does not take up space
  • Absolutely positioned elements overlap other elements

span {display:block;}

 p.pos_fixed

{
position:fixed;
top:30px;
right:5px;
}

Leave a Comment

Your email address will not be published.