CSS Positioning
CSS 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.
Fixed Positioning
The position of the element is fixed relative to the browser window.
It won’t move even if the window is scrolled:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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支持只有一個(gè)!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>Run the program to try it
Relative Positioning
Relatively positioned elements are positioned relative to their normal position.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 the program and try it
The contents of relatively positioned elements that can be moved and elements that overlap each other, The space it originally occupied will not change.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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> 即使相對(duì)定位元素的內(nèi)容是移動(dòng),預(yù)留空間的元素仍保存在正常流動(dòng)。</p>
</body>
</html>Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Absolute positioning
Absolutely positioned elements are positioned relative to the nearest positioned parent element. If the element has no positioned The parent element, then its position is relative to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>用絕對(duì)定位,一個(gè)元素可以放在頁(yè)面上的任何位置。標(biāo)題下面放置距離左邊的頁(yè)面100 px和距離頁(yè)面的頂部150 px的元素。.</p>
</body>
</html>Run the program to try it
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.
Overlapping elements
Elements are positioned independently of the document flow, so they can cover 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="100" height="140" />
<p>因?yàn)閳D像元素設(shè)置了 z-index 屬性值為 -1, 所以它會(huì)顯示在文字之后。</p>
</body>
</html>Run the program to try Here
Elements with a higher stacking order are always in front of elements with a 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
How to use scroll bars to display overflow content within elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。.</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 the program Try it
Example
How to change the cursor
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>將鼠標(biāo)移動(dòng)到這些字上改變鼠標(biāo)樣式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 the program and try it
