What are the position properties of CSS? Introduction to position properties and usage in CSS

What this article brings to you is about the position properties of CSS. CSS in the position properties and usage of the introduction, there is a certain reference value, the need for friends can refer to, I hope to help you.

Position Property Introduction

(1) The Position property in CSS has been since CSS2, which specifies the positioning type of the element. All major browsers support the Position property.

(2) The optional value of the position attribute in CSS is four: static, relative, absolute, fixed. The following are described separately. (In fact, there is a inherit, but this is unique to IE, this is not discussed here)

1, Basic introduction
(1) Static is the default value. Indicates that there is no positioning, or that there is no positional property.
(2) If the element position property value is static (or if the position attribute is not set), the element appears in a normal stream (ignoring top, bottom, left, right, or Z-index declaration).

2, using the sample

Css:

<style>  Div {    width:200px;    height:100px;    Background-color: #C9FFFF;  } </style>

Html:

<div></div><input type= "Text"/>

We do not set the element's Postion property value, then the default display is as follows:

<div class= "position-static" ></div> <input type= "text"/>

1, Basic introduction

(1) Relative generates relatively positioned elements, positioned relative to their normal positions.
(2) The process of relative positioning completion is as follows:

First an element is generated by default (static) (and the element floats like a layer).
Then moving relative to the previous position, the direction and amplitude of the move are determined by the left, right, top, bottom properties, and the position before the offset is retained.

2, sample code

The following code sets the text input box position to relative (relative positioning) and moves 15 pixels to the right and up, respectively, relative to the default position.

Css:

  div {    width:200px;    height:100px;    Background-color: #C9FFFF;  }     input {    position:relative;    left:15px;    Top: -15px;  }
Html:

<div></div><input type= "Text"/>
The results are as follows:


1, Basic introduction

(1) Absolute generates an absolutely positioned element.
(2) An absolutely positioned element uses the left, right, top, and bottom properties to be absolutely positioned relative to its closest parent element with a positional property.
(3) If no such parent element exists, then relative to the body element, that is, relative to the browser window.

2, sample code

The following code makes absolute positioning of the caption element relative to its parent container (note that the parent container position to be set to relative).
Also, use the top property to move the caption element up so that it overrides the top border of the parent container.
Finally, the horizontal center of this absolutely positioned element is achieved by the left and Margin-left mates.

Css:

  #box {    width:200px;    height:100px;    -webkit-box-flex:1;    border:1px solid #28AE65;    border-radius:6px;    padding:20px;    position:relative;    font-size:12px;  }   #title {    background: #FFFFFF;    Color: #28AE65;    font-size:15px;    Text-align:center;    width:70px;    height:20px;    line-height:20px;    Position:absolute;    Top: -10px;    left:50%;    Margin-left: -35px;  }
Html:

<div id= "box" > <div id= "title" > title </div> Welcome to PHP Chinese web </div>
The results are as follows:


1, Basic introduction
(1) fixed generates an absolutely positioned element that is positioned relative to the browser window.
(2) Fixed positioned elements do not change with the scroll bars of the browser window, and are not affected by the flow of the document, but are always located somewhere within the view in the browser window.

2, sample code
(1) The following code makes the input box at the bottom of the browser window.

Css:

  input {    position:fixed;    bottom:10px;  }
Html:

<ol> <li> Data </li><li> data </li><li> data </li><li> data </li><li > Data </li><li> data </li> <li> data </li><li> data </li><li> data </li> <li> Data </li><li> Data </li><li> data </li> <li> data </li><li> data </ li><li> Data </li><li> Data </li><li> data </li><li> data </li> <li> data </li><li> Data </li><li> Data </li><li> data </li><li> data </li><li > Data </li></ol><input type= "text"/>
The results are as follows:


(2) You can see that no matter how the scroll bar scrolls, the input box is always at the bottom of the window.