Css 简明教程
CSS - Position Property
属性 position 可用于创建浮动元素、浮动侧边栏和其他交互式功能。
Possible Values
-
static − 元素根据页面的默认或正常流进行定位。因此，如果我们设置 left/right/top/bottom/z-index，则该元素将不受影响。
-
relative − 元素的原始位置与 static 值一样，根据页面的正常流进行定位。但是现在 left/right/top/bottom/z-index 将起作用。这些位置属性将元素从原始位置向该方向移动。
-
absolute − 元素从文档流中完全移除。然后以其包含块为参考进行定位，并使用侧向偏移属性放置其边。绝对定位元素可能会与其他元素重叠或被它们重叠。
-
fixed − 元素的 fixed 定位与 absolute 定位类似，不同之处在于固定元素的包含块始终是视区。在此，该元素从文档流中完全移除，并且不具有相对于文档任何部分的位置。
-
sticky − 该元素粘附在具有“滚动机制”的最近定位祖先的顶部。
CSS position - static Value
当你使用 position: static 属性时，元素将在文档流中正常定位。left、right、top、bottom 和 z-index 属性不会影响元素。这是默认值。
<html>
<head>
<style>
.normal-box {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.static-box {
display: inline-block;
position: static;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="static-box">
<h2>Position: static</h2>
<p>This is a box with static position.</p>
</div>
</body>
</html>CSS position - relative Value
CSS position: relative 属性相对于元素在页面中的原始位置对其进行定位。你可以使用 left、right、top 和 bottom 属性来移动元素，但它仍会在文档流中占用空间。
<html>
<head>
<style>
.normal-box {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.relative-box {
display: inline-block;
position: relative;
left: 30px;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="relative-box">
<h2>Position: relative</h2>
<p>This is a box with relative position.</p>
</div>
</body>
</html>CSS position - absolute Value
具有 position: absolute 的元素会脱离文档流，并相对于其最近的定位祖先（如果有）进行定位。如果没有定位祖先，则元素相对于视区进行定位。
你可以使用 top、right、bottom 和 left 属性来指定元素相对于其包含块的位置。
<html >
<head>
<style>
.normal-box {
background-color: #f2c3ee;
border: 1px solid #333;
padding: 10px;
margin-bottom: 20px;
width: 350px;
height: 100px;
}
.absolute-box {
background-color: #bbedbb;
border: 1px solid #333;
padding: 10px;
position: relative;
width: 300px;
height: 100px;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a Noraml box.</p>
<div class="absolute-box">
<h2>Position: Absolute</h2>
<p>This is a box with absolute position.</p>
</div>
</div>
</body>
</html>CSS position - fixed Value
为了让一个元素即使在用户滚动时仍停留在屏幕上的同一位置，你可以将 position 属性设置为 fixed。然后你可以使用 left、right、top 和 bottom 属性将该元素定位在你想要的位置。
<html>
<head>
<style>
.position_container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.fixed-position {
position: fixed;
top: 15px;
left: 60px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="position_container">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="fixed-position">Tutorialspoint CSS Position Fixed</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>CSS position - sticky Value
你可以将 position 属性设置为 sticky ，以创建一个当用户滚动页面时粘附在视区顶部的元素。
position: sticky 属性是 position: relative 和 position: fixed 属性的组合。
<html>
<head>
<style>
.position_container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.sticky-position {
position: sticky;
top: 15px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="position_container">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="sticky-position">Tutorialspoint CSS Position Sticky</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>CSS Position - Positioning Text In an Image
在以下示例中，你可以使用 position: absolute 属性以不同的方向定位文本。文本元素位于左上、右上、左下和右下角。
<html>
<head>
<style>
.container {
position: relative;
border: 2px solid #ef2c2c;
}
.center {
position: absolute;
top: 45%;
width: 100%;
text-align: center;
}
.top-left {
position: absolute;
top: 12px;
left: 30px;
}
.top-right {
position: absolute;
top: 12px;
right: 30px;
}
.bottom-left {
position: absolute;
bottom: 12px;
left: 30px;
}
.bottom-right {
position: absolute;
bottom: 12px;
right: 30px;
}
img {
width: 100%;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="images/red-flower.jpg" alt="abc" width="1000px" height="350px">
<h3 class="center">Text at Centered</h3>
<h3 class="top-left">Text at Top Left</h3>
<h3 class="top-right">Text at Top Right</h3>
<h3 class="bottom-left">Text at Bottom Left</h3>
<h3 class="bottom-right">Text at Bottom Right</h3>
</div>
</body>
</html>