css positioning

WBOY
Release: 2016-09-27 14:05:21
Original
1660 people have browsed it

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!

By setting the vertical and horizontal position of the element, you can:

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.

Related labels:
source:php.cn
Previous article:h5 input box prompt + normal text box prompt Next article:Problem with img being centered in div
Statement of this Website
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
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template