AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css position

2016-11-17 839
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： DOCTYPE html> position pre{ font-size: 22px; } b{ font-size: 38px; font-family: "Microsoft Yahei"; } . 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position</title>
    <style type="text/css">
    pre{ font-size: 22px; }
    b{ 
        font-size: 38px;
        font-family: "Microsoft Yahei";
     }
     .defaulttext{
         color: #666666;
         font-style: italic;
         font-weight: bold;

     }

    .sample0{
        border: 1px dashed red;
        width: 600px;
        height: 400px;
        position: relative;
        background-color: #1ffeee;
    }
    .sample0_child{
        position: absolute;
/*        width: 200px;
        height: 100px;*/
        background-color: red;

        bottom:  30px;
        right: 30px;
        top: 30px;
        left: 30px;
    }
    </style>
</head>
<body>
<pre>
    position--设置定位方式，设置参照物
    top,right,bottom,left,z-index--设置位置，必须配合position使用，如果一个元素不是一个定位元素，设置了这些属性是不起效果的。
    上面这两项结合就能定 一个元素在浏览器中的位置
</pre>
<br><br>
<pre><b>1. top/right/bottom/left 边缘与参照物边缘距离</b>： <span class="defaulttext">默认 top:0,left:0 </span>边缘和参照物边缘的位置， 可以是负值</pre><br>
<pre>如果不给子div设置宽高，只设置 position 和left top right bottom 这些边缘间距离值，那么子div 会被撑大</pre>
<div class="sample0">
    <div class="sample0_child">

    </div>
</div>


<br><br>

<style type="text/css">
.zparent{
    width: 700px;
    height: 380px;
    position: relative;
    border: 1px dashed #ff0000;
    font-family: "Microsoft Yahei";
    font-size: 40px;
}
.z01{
    text-align: center;
    line-height: 80px;
    position: absolute;
    background-color: blue;
    color: #ffffff;
    width: 300px;
    height: 150px;
    z-index: 1;
    top: 50px;
    left: 50px;
}
.z02{
    text-align: center;
    line-height: 80px;
    position: absolute;
    background-color: red;
    color: #ffffff;
    width: 300px;
    height: 150px;
    z-index: 2;
    top: 100px;
    left: 100px;
}
.z03{
    text-align: center;
    line-height: 150px;
    position: absolute;
    background-color: blue;
    color: #ffffff;
    width: 300px;
    height: 150px;
    z-index: 3;
    top: 150px;
    left: 150px;
}

</style>
<pre><b>2. z-index  Z轴</b>，<span class="defaulttext">    默认值 auto </span>适用于position 非static 元素</pre>
<div class="zparent">
    <div class="z01">z-index:1</div>
    <div class="z02">z-index:2</div>
    <div class="z03">z-index:3</div>
</div>
<br>

<pre>
默认情况下(没有设置z-index属性)，元素会按照文档流中出现的顺序，晚出现的盖在早出现的上面。
是不是z-index值越大的越好呢？不一定，因为z-index还有一个『z-index 栈』的概念</pre><br>
<style type="text/css">
.zparent_{
    position: relative;
    width: 400px;
    height: 200px;
    border:1px dashed red;
    margin-top: 10px;
    font-family: "Microsoft Yahei";
    font-size: 22px;
}
.zchild_{
    position: absolute;
    text-align: center;
    width: 200px;
    height: 100px;
    color: #ffffff;
    font-size: 22px;
    line-height: 100px;
    font-family: "Microsoft Yahei";
}

.zparent_1{
    z-index: 1;
    background-color: #baadbd;
}
.zchild_1{
    background-color: red;
    bottom: 10px;
    left: 100px;
    z-index: 1;
    
}
.zchild_3{
    background-color: gray;
    bottom: 70px;
    left: 120px;
    z-index: 2;

}


.zparent_2{
    z-index: -1;
    background-color: orange;
}

.zchild_2{
    background-color: #188ddd;
    top:-50px;
    left: 150px;
    z-index: 1;
}

</style>

<div class="zparent_ zparent_1 ">z-index: 1;
    <div class="zchild_ zchild_1">z-index: 1</div>
    <div class="zchild_ zchild_3"> z-index: 2</div>
</div>

<div class="zparent_ zparent_2">z-index: -1;
    <div class="zchild_ zchild_2 ">z-index : 1</div>
</div>
<br><br>


<pre><b>3. position 位置</b>：position: <span class="defaulttext">static</span>|relative|absolute|fixed </pre>
<br>

<pre><b>3.1 position:relative </b> 
仍在文档流中。 
相对定位元素的参照物是 元素本身。
可以改变元素在 Z 轴上的层级。
</pre>
<style type="text/css">
.relative{
    height: 100px;
    width: 200px;
    color: #ffffff;
    font-size: 22px;
    font-family: "Microsoft Yahei";
}

.relative_0{
    background-color: orange;
    bottom: -50px;
    left: 50px;
    position: relative;

}
.relative_1{
    background-color: #ff7b2e;
    top: 40px;
    left: 40px;
    position: relative;

}
.relative_2{
    background-color: orange;
}
</style>
<div class="relative relative_0">position: relative;</div>
<div class="relative relative_1">position: relative;</div>
<div class="relative relative_2"></div>

<br><br>

<pre><b>3.2 position:absolute </b> 
默认宽度为内容宽度。
脱离文档流。
参照物为第一个定位祖先/根元素。
</pre>
<style type="text/css">
.absolute_container{
    width: 400px;
    margin: 200px;
    line-height: 2;
    border: 1px dashed #aaa;
    position: relative;
}
.absolute_sample{
    background-color: pink;
    position: absolute;
    bottom: 10px;
    left: -30px;
}


</style>
<div class="absolute_container">
    <div>绝对定位元素的前序元素</div>
    <div class="absolute_sample">sample</div>
    <div>绝对定位元素的后序元素</div>
</div>

<br><br>

<pre><b>3.3 position:fixed </b> 
默认宽度为内容宽度。
脱离文档流。
参照物为视窗。
<style type="text/css">
.fixed_container{
    width: 600px;
    height: 500px;
    border: 1px dashed red;
    color: #ffffff;

}
.fixsample{
    background-color: orange;
    width: 400px;
    height: 100px;

}
.fixed_sample{
    position: fixed;
    bottom: 10px;
    left: 0;
    background-color: red;
}
</style>

<div class="fixed_container">
    <div class="fixsample">fixed元素的前序元素</div>
    <div class="fixsample fixed_sample">
    position:fixed;    
    bottom: 10px;
    left: 0;
    </div>
    <div class="fixsample ">fixed元素的后序元素</div>
</div>
</body>
</html>
开始做，坚持做，重复做
文章标签：
前端开发
关键词：
CSS Position
effort880829
目录
相关文章
土木林森
|
3月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力？带你彻底理解粘性定位的奇妙世界！
【8月更文挑战第20天】在前端开发中，CSS的粘性定位（`position: sticky`）是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位，达到指定阈值时转为固定定位，非常适合制作“吸顶”导航栏等。例如，设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏，还可应用于侧边栏等，增强布局灵活性与用户体验。尽管如此，仍需注意不同浏览器间的兼容性和可能的布局冲突。
土木林森
155 0
朝阳39
|
4月前
|
前端开发 容器
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
朝阳39
55 0
朝阳39
|
4月前
|
前端开发
css display position float 之间的关系
css display position float 之间的关系
朝阳39
26 0
_长银_
|
6月前
|
前端开发
CSS position 小结
CSS position 小结
_长银_
32 0
汪末末
|
前端开发 容器
CSS属性 Position的几种定位方式
CSS Position属性
汪末末
82 0
CSS属性 Position的几种定位方式
全栈弄潮儿
|
前端开发 容器
【CSS】定位属性position使用详解（static、relative、fixed、absolute）
css定位属性position：static、relative、fixed、absolute详细介绍及使用样例。
全栈弄潮儿
137 0
haihonghong
|
前端开发 Linux 程序员
「CSS」知识点笔记：position
「CSS」知识点笔记：position
haihonghong
106 0
「CSS」知识点笔记：position
苏凉.py
|
前端开发
web前端-CSS(display，position，overflow和浮动float)
web前端-CSS(display，position，overflow和浮动float)
苏凉.py
131 0
worlds
|
前端开发
CSS Position(定位)
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。 也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
worlds
167 0
CSS Position(定位)
云内容小助手
|
前端开发 开发者 容器
CSS position | 学习笔记
快速学习CSS position
云内容小助手
170 0
CSS position | 学习笔记