1. Introduction 1.1
Attribute: Specifies the positioning type of the element. That is, the elements are displayed anywhere on the page.
1.2 Main values①Absolute: Absolute positioning; separated from the layout of the Document Stream, the remaining space is filled by the elements behind it.
②Relative: Relative positioning. It is out of the document flow layout, but it is still left blank in the original position of the document flow.
③Fixed: Fixed positioning; similar to absolute, but does not change the position as the scroll bar moves.
④Static: Default value; default layout.
1.3 secondary attributesThe position attribute only disconnects the element from the document stream. to display the element as expected, use the following attributes (position: static does not support these attributes ):
①: Indicates how many pixels are inserted to the left of the element and how many pixels are moved to the right of the element.
②: Indicates how many pixels are inserted to the right of the element and how many pixels are moved to the left of the element.
③: Indicates the top of the element.
④: Indicates how many pixels are inserted to the bottom of the element, and how many pixels are moved up by the element.
The value of the preceding attribute can be negative, in px.
2. Detailed description of 2.1 position: absolute2.2.1:
Absolute positioning; separated from the layout of the Document Stream, the left-behind space is filled by the elements behind it.
2.2.2 View: 2.2 position: relative2.2.1 descriptionRelative positioning. It is out of the layout of the Document Stream, but it is still left blank in the position of the Document Stream.
2.2.2 View 2.3 position: fixed2.3.1 descriptionFixed positioning; similar to absolute, but does not change the position as the scroll bar moves.
2.3.2 View 2.3.3 application scenarios① Logon coverage: for example, dz Forum logon.
② False QQ message advertisement.
3. Summary 3.1 whether the scroll bar appears
When the element containing the position attribute is the edge element:
① Absolute and relative: an edge element that contains the two values. When the browser shrinks to the invisible element, a scroll bar appears.
② Fixed: edge element containing this value. When the browser zooms out to this element invisible, no scroll bars will appear.
3.2 Example 3.2.1 View 3.2.2 code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> position </title> <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>
Series of articles =================================================== ====
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
