Home > Developer > Web Develop

CSS Position Positioning Properties

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Introduction 1.1 Description

Position Property: Specifies the positioning type of the element. This is the layout of the element out of the document flow, displayed anywhere on the page.

1.2 Primary values

①absolute: absolute positioning; Out of the layout of the document flow, the remaining space is populated by the elements that follow. The starting position of the anchor is the closest parent element (Postion is not static), otherwise the body document itself.

②relative: Relative positioning, not out of the layout of the document flow, only changes its own position, in the original position of the document flow left blank area. The position of the starting position for this element that was originally in the document flow.

③fixed: Fixed positioning, similar to absolute, but does not change position as the scroll bar moves.

④static: Default value; default layout.

1.3 Secondary properties

The Position property simply takes the element out of the document stream, and if this element is to be displayed as desired, you need to use the following properties (Position:static does not support these):

①left: Indicates how many pixels are inserted to the left of the element, and how many pixels the element moves to the right.

②right: Indicates how many pixels are inserted to the right of the element, and how many pixels are moved to the left.

③top: Indicates how many pixels are inserted above the element, and how many pixels are moved down the element.

④bottom: Indicates how many pixels are inserted below the element, so how many pixels are moved up the element.

The value of the above property can be negative, in pixels: px. If it is a percentage, the parent container is the reference, but if the parent does not determine a specific height, if the position is relative,top and the bottom property does not work at this time, such as:

<! DOCTYPE html>


<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Body {
Background-image:url ("amazing-sky.jpg");
Background-position:center, center;
Background-size:cover;
}

/*html,body{
height:100%
}*/

#container {
Color: #ffffff;
width:100%;
Text-align:center;
position:relative;
bottom:50%;
}
</style>


<body>
<!--<div id= "Container" >-
<div id= "Container" >
<p> Take your beauty and imagination and explore the possibilities of web development, and we invite you to embark on the HTML5 learning path together. </p>
<a href= "invite.php" > invite you to attend </a>
</div>
<!--</div>--
</body>


The parent of container in the example above is body, the width defaults to 100%, the height is not set 100%, all top,bottom do not work

2. Position Positioning Method 2.1 position:absolute2.1.1 Description

absolute positioning; Leaving the layout of the document flow, the remaining space is populated by the following elements. The starting position of the anchor is the closest parent element (Postion is not static), otherwise the body document itself.

2.1.2 View

2.2 position:relative2.2.1 Description

Relative positioning, not out of the layout of the document flow, only changes its position, in the original position of the document flow left blank area. The position of the starting position for this element that was originally in the document flow.

2.2.2 View

2.3 position:fixed2.3.1 Description

Fixed positioning, similar to absolute, but does not change position as the scroll bar moves.

2.3.2 View

2.3.3 Application Scenarios

① Login Box Overlay: Login as DZ Forum.

② false QQ message advertisement.

2.4 position:static2.4.1 Description

The default location, which indicates that this element is the default targeting method.

3. Summarize whether the 3.1 scroll bar appears

When the element containing the position attribute is the most-marginal element:

①absolute and relative: The edge element that contains this 2 value, and the scroll bar appears when the browser shrinks to this element when it is not visible.

②fixed: The edge element that contains this value, and the scroll bar does not appear when the browser shrinks to this element when it is not visible.

3.2 Example 3.2.1 View

<! DOCTYPE html>
<title>position</title>
<meta charset= "UTF-8" >
<style type= "Text/css" >
div {
height:200px;
width:300px;
Border-color:black;
Border-style:solid;
border-width:1px;
}

#a {
Position:absolute;
left:900px;
top:150px;
}

#b {
position:relative;
left:500px;
top:100px;
}

#c {
position:fixed;
left:970px;
top:400px;
}

#d {
position:static;
Background-color:window;
}
</style>


<body>
<div id= "a" >
Div-a
<br/> Position:absolute;
<br/> Absolute Positioning
</div>
<div id= "B" >
Div-b
<br/> position:relative;
<br/> Relative positioning, not out of the document flow, only changes its position, in the original position of the document flow left blank area.
</div>
<div id= "C" >
Div-c
<br/> position:fixed;
<br/> Fixed positioning, fixed in the page, not with the size of the browser changes to change location.
</div>
<div id= "D" ></div>
<input type= "text" value= "input1"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>


CSS Position Positioning Properties

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
css position center of screen properties manual positioning slides android indoor positioning android indoor positioning indoor positioning sdk positioning marketing book

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More