Home >Web Front-end >CSS Tutorial >Detailed explanation of position attribute in CSS
Detailed explanation of position attribute in CSS
- 怪我咯Original
- 2017-06-22 09:16:171938browse
The position attribute in CSS is to set the positioning type of the element, which includes absolute (absolute positioning), relative (relative positioning), There are four parameters: static (static positioning, default value) and fixed (fixed positioning).
static: Default. An element whose position is set to static will always be at the position given by the page flow (static elements ignore any top, bottom, left or right declarations).
relative: An element whose position is set to relative can be moved relative to its normal position, so "left:20" will move the element to The position is 20 pixels to the left of the normal position.
absolute: An element whose position is set to absolute can be positioned at specified coordinates relative to the element that contains it. The position of this element can be specified via the "left", "top", "right" and "bottom" attributes.
fixed: Elements whose position is set to fixed can be positioned at specified coordinates relative to the browser window. The position of this element can be specified via the "left", "top", "right" and "bottom" attributes. The element will stay in that position whether the window is scrolled or not. Works in IE7 (strict mode).
Example
Use the position attribute to position the c1a436a314ed609750bd7c7d319db4da element, the code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>The above is the detailed content of Detailed explanation of position attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!