CSS中的定位属性——————position

最新推荐文章于 2024-07-13 04:58:24 发布

thal

最新推荐文章于 2024-07-13 04:58:24 发布

阅读量137

点赞数

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/qq_39835159/article/details/106302231

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、取值

值(value):static(默认) | relative(相对) | absolute(绝对) | sticky (粘性)| fixed(固定)
##static(默认定位方式)
	static指定使用正常的布局行为，即元素在文档常规流中的当前布局位置。
	**值得注意：**top,right,bottom,left 和 z-index属性无效
##relative(相对定位)
	relative中元素先放置在未添加定位时的位置再不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
	relative的布局与static相同，它的偏移完全是视觉效果，实际位置依旧在本来的位置，不会对其他东西造成影响。
	**值得注意：**position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。同时，使用relative还有可能增加滚动条。
##absolute(绝对定位)
		元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
		**值得注意：**absolute定位偏移的位置是离它最近的同时已经定位的父级包含块的位置，关于遮挡的问题，你可以使用z-index来选择想要显示的上层。
##sticky（粘性定位）
		**sticky从效果上看像是混合体，在页面滑动之前表现为普通的文档流、relative，到达“临界点”时表现为fixed。
		sticky的偏移是基于最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
		值得注意：一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。overflow将会阻止了所有“sticky”行为**。
##fixed（固定定位）
		元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。
		值得注意：当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

二、实例

1.默认定位就不演示了。
2.relative（相对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        footer{
            width: 800px;
            height: 600px;
            background-color:cornsilk;
            margin: 100px;
        }
        section{
            width: 500px;
            height: 300px;
            background-color: chartreuse;
            border: 1px solid rebeccapurple;
            position:relative;
            margin-left: 400px;
        }
        nav{
            width: 100px;
            height: 100px;
            background-color: cyan;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <footer>
        <section>
            <div></div>
        </section>
        <nav></nav>
    </footer>
   
    
</body>
</html>

位置保留
3.absolute(绝对定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        section{
            margin:50px;
            width: 500px;
            height: 300px;
            background-color: chartreuse;
            border: 1px solid rebeccapurple;
            /* position:relative */
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
    
</body>
</html>

absolute默认情况下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        section{
            margin:50px;
            width: 500px;
            height: 300px;
            background-color: chartreuse;
            border: 1px solid rebeccapurple;
            position:relative;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
    
</body>
</html>

在离它最近父元素使用定位后的效果

4.sticky（粘性定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        header{
            width: 100%;
            height: 50px;
            background-color: grey;
        }
        div{
            width: 100%;
            height: 50px;
            background-color: black;
            position: sticky;
            top: 0px;
        }
        section{
            width: 100%;
            height: 600px;
            background-color: greenyellow;
        }
        section+section{
            background-color: honeydew;
        }
    </style>
</head>
<body>
    <header></header>
    <div></div>
    <section></section>
    <section></section>
</body>
</html>

sticky（粘性定位）
粘性定位

5.fixed（固定定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        header{
            width: 100%;
            height: 50px;
            background-color: grey;
        }
        div{
            width: 100%;
            height: 50px;
            background-color: black;
            position:fixed;  /*在这里修改定位为：fixed */
            top: 0px;
        }
        section{
            width: 100%;
            height: 600px;
            background-color: greenyellow;
        }
        section+section{
            background-color: honeydew;
        }
    </style>
</head>
<body>
    <header></header>
    <div></div>
    <section></section>
    <section></section>
</body>
</html>

灰色被遮挡住，黑条居于视口顶部，同时跟随视口移动
灰色被黑条覆盖，黑条居于视口顶部，同时跟随视口移动

thal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的定位属性——————position

#取值值(value):static(默认) | relative(相对) | absolute(绝对) | sticky (粘性)| fixed(固定)##static(默认定位方式)static指定使用正常的布局行为，即元素在文档常规流中的当前布局位置。**值得注意：**top,right,bottom,left 和 z-index属性无效##relative(相对定位)relative中元素先放置在未添加定位时的位置再不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留
复制链接

扫一扫