CSS Positioning

CSS Position(positioning)

The CSS position property allows you to overlap one part of the layout with another, as well as accomplishing what for many years has typically required the use of multiple tables. Completed tasks. Example:

Positioning is sometimes tricky!

Determine the elements displayed in front!

Elements can overlap!

Positioning

The CSS positioning property allows you to position an element. It can also place one element behind another and specify what should happen if one element's content is too large.

Elements can be positioned using the top, bottom, left and right attributes. However, these properties will not work unless the position property is set first. They also work differently, depending on the positioning method.

There are four different positioning methods.

Static Positioning

The default value of HTML elements, that is, without positioning, the element appears in the normal flow.

Static positioned elements will not be affected by top, bottom, left, right.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>

<div class="static">
该元素使用了 position: static;
</div>

</body>
</html>

Run instance?

Click the "Run Instance" button to view the online instance

Fixed Positioning

The position of the element is a fixed position relative to the browser window.

It does not move even if the window is scrolled:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7和IE8支持只有一个!DOCTYPE指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

Running Example»

Click the "Run Example" button to view the online example

Note: Fixed positioning needs to be described under IE7 and IE8! DOCTYPE can support it.

Fixed positioning Makes the element's position independent of document flow, so it doesn't take up space.

Fixed positioned elements overlap with other elements.

Relative Positioning

The positioning of a relatively positioned element is relative to its normal position.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h2.pos_left
{
	position:relative;
	left:-20px;
}

h2.pos_right
{
	position:relative;
	left:20px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>

</html>

Run instance»

Click the "Run instance" button to view the online instance

The content of relatively positioned elements that can be moved and elements that overlap each other will not change the space they originally occupy.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h2.pos_top
{
	position:relative;
	top:-50px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>

</html>

Run instance »

Click the "Run instance" button to view the online instance

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute positioning

The position of an absolutely positioned element is relative to the nearest positioned parent element. If the element has no positioned parent element, its position is relative to <html>:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Absolutely positioning makes the element's position independent of the document flow, so it does not occupy space.

Absolutely positioned elements overlap with other elements.

sticky positioning

sticky literally means sticky in English, so it can be called sticky positioning.

position: sticky; Positioned based on the user's scroll position.

Sticky positioned elements depend on the user's scrolling, switching between position:relative and position:fixed positioning.

It behaves like position:relative; and when the page scrolls beyond the target area, it behaves like position:fixed; and it will be fixed at the target position.

Element positioning is relative positioning before crossing a specific threshold, and fixed positioning thereafter.

This specific threshold refers to one of top, right, bottom or left. In other words, sticky positioning can only take effect by specifying one of the four thresholds top, right, bottom or left. Otherwise the behavior is the same as relative positioning.

Note: Internet Explorer, Edge 15 and earlier IE versions do not support sticky positioning. Safari requires the -webkit- prefix (see examples below).

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

Run instance?

Click the "Run Instance" button to view the online instance

Overlapping elements

Elements are positioned independently of document flow, so they can overlap other elements on the page

The z-index attribute specifies the stacking order of an element ( Which element should be placed in front, or behind)

An element can have a positive or negative stacking order:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

Elements with higher stacking order are always in front of elements with lower stacking order.

Note: If two positioned elements overlap and no z-index is specified, the element last positioned in the HTML code will be displayed first.

More examples

Example: Crop the shape of the element

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img 
{
	position:absolute;
	clip:rect(0px,60px,200px,0px);
}
</style>
</head>

<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

This example demonstrates how to set the shape of an element. The element is clipped into this shape and displayed.

Example: How to use scroll bars to display overflowing content within an element

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.scroll
{
	background-color:#00FFFF;
	width:100px;
	height:100px;
	overflow:scroll;
}

div.hidden 
{
	background-color:#00FF00;
	width:100px;
	height:100px;
	overflow:hidden;
}
</style>
</head>

<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>

Run Example»

Click "Run" Example" button to view online examples

This example demonstrates how the overflow property creates a scroll bar and is set to fit when the content of an element is too large in the specified area.

Example: How to set up automatic browser overflow processing

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div 
{
	background-color:#00FFFF;
	width:150px;
	height:150px;
	overflow:auto;
}
</style>
</head>

<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>

<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>

</html>

Run Example»

Click the "Run Example" button to view Online instance

Instance: Change cursor

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

Run instance»

Click the "Run instance" button to view Online example

This example demonstrates how to set up the browser to automatically handle overflow.

All CSS positioning properties

The number in the "CSS" column indicates which CSS (CSS1 or CSS2) version defines the property.

Clip an absolutely positioned elementshape2##cursorSet what happens when an element's content overflows its area. auto2hidden## overflow-xscroll##positionstaticrightinherit

← CSS Display

CSS Float(floating) →

submit

php.cn

Attribute	Description	Value	CSS
##bottom	defines the positioning element under The offset between the margin boundary and the bottom boundary of its containing block.	autolength % inherit	2
##clip		auto inherit
Display the cursor to move to the specified type	url	auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
##left	defines positioning The offset between the element's left margin edge and the left edge of its containing block.	autolength % inherit	2
##overflow		hiddenscroll visible inherit
##overflow-y Specify how to handle content at the top/bottom edges of an overflow element's content area	auto	scroll visible no-display no-content 2
Specifies how to handle content on the right/left edge of an overflow element's content area	auto hidden	visibleno-display no-content 2
Specify the positioning type of the element	absolutefixedrelative	inherit 2
defines positioning The offset between the element's right margin edge and the right edge of its containing block.	autolength %	2
top	Defines the offset between the top margin boundary of a positioned element and the top boundary of its containing block.	auto length % inherit	2
##z-index	Set the stacking order of elements	numberauto inherit	2