Home > Article > Web Front-end > css positioning
css positioning
- WBOYOriginal
- 2016-09-27 14:05:211663browse
First look at an example:
Structure:
Fixed positioning
Style:
*{padding: 0;margin: 0;}
.static{width:300px;height: 300px;}
.relative{margin:50px 50px;width: 200px;height: 200px;position: relative;top: 50px; } .absolute{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.fixed{position: fixed;top: 0;left: 0;width: 100px;height: 100px; }
Rendering:
Summary! 
1. Relative positioning: The element moves "relative to" its starting point. The element on the picture has moved 50px downwards relative to the starting point. It occupies the original space.
2. Absolute positioning: The element moves "relative to" its parent element (or its nearest positioned ancestor element). The coordinates of the upper left corner of the element on the diagram coincide with its parent element. It doesn't take up space.
3. Fixed positioning: The element moves "relative to" the viewport. The element on the graph moves to the position of coordinates (0,0). It doesn't take up space.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn