CSS 布局 position 详解-阿里云开发者社区

开发者社区> 姜白告> 正文

CSS 布局 position 详解

简介: CSS 布局 position 详解 1.position 之 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
+关注继续查看

CSS 布局 position 详解

1.position 之 static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。


实例:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .block {
            position: relative;
            top:10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            box-sizing: border-box;
        }
        .block:nth-child(2){
            position: static;  //忽略 top 属性
            border-color:red;
        }
    </style>
</head>
<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>
</html>

运行:


2.position 之 relative(内容参见博客 Position属性的四个值

生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。


定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在他是默认参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位,有以下属性:

  1)如果没有TRBL(Top、Right、Bottom、Left),以父级的左上角,在没有父级的时候,他是参照浏览器左上角(到这里和absolute第一条一样),如果在没有父级元素的情况下,存在文本,则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。

  2)如果设定TRBL,并且父级没有设定position属性,仍旧以父级的左上角为原点进行定位(和absolut不同)。

  3)如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置 由TRBL决定(前半段和absolute一样)。如果父级有Padding属性,那么就以内容区域的左上角为原点,进行定位(后半段和absolut不 同)。

  以上三点可以总结出,无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。

Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有Top起作用。

left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离,两者同时存在时,只有left起作用。

综合上面对relative的叙述,我们就可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV,或者说 只要将我们平时布局页面的div的CSS属性中加上position:relative后,就不只是用float布局页面了,还可以用TRBL进行布局页 面 了,或者说加上position:relative的DIV也可以像普通的DIV进行布局页面了,只不过还可以用TRBL进行布局页面。但是 position属性为absolute不可以用来布局页面,因为如果用来布局的话,所有的DIV都相对于浏览器的左上角定位了,所以只能用于将某个元素 定位于属性为absolute的元素的内部某个位置。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-relative</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
		.parent {
			width:300px;
			height:300px;
			background: blue;
		}
		.parent div {
			width: 80px;
			height: 80px;
		}
        .sub-1 {
        	position:relative;
        	background: red;
        	top:20px;
        	left: 50px;
        }
        .sub-2 {
			background: green;
        }

    </style>
</head>
<body>
    <div class="parent">
    	<div class="sub-1"></div>
    	<div class="sub-2"></div>
    </div>
    <div class=""></div>
</body>
</html>

运行:


3.position 之 absolute (内容参见博客 Position属性的四个值

生成绝对定位的元素,相对于 static 定位以外第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。


 1)如果没有TRBL(top、right、bottom、left),以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方。
  2)如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
  3)如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由 TRBL决定。即使父级有Padding属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根 本没有影响。
 

以上三点可以总结出,若想把一个定位属性为absolute的元素定位于其父级元素内,只有满足两个条件:

  第一:设定TRBL

  第二:父级设定Position属性

  上面的这个总结非常重要,可以保证你在用absolue布局页面的时候,不会错位,并且随着浏览器的大小或者显示器分辨率的大小,而不发生改变。

  只要有一点不满足,元素就会以浏览器左上角为原点,这就是初学者容易犯错的一点,已经定位好的板块,当浏览器的大小改变,父级元素会随之改变,但是设 定Position属性为absolute的板块和父级元素的位置发生改变,错位了,这就是因为此时元素以浏览器的右上角为原点的原因。
  初学者很容易犯错的是,不清楚Position属性为absolute的板块,若想定位到父级板块中,并且当浏览器的大小改变或显示器的分辨率改变,布局不发生改变,是需要满足两个条件的,只要有一点不满足,元素就会以浏览器左上角为原点,从而导致页面布局错位。

Top的值表示对象上边框与浏览器窗口顶部的距离,bottom的值表示对象下边框与浏览器窗口底部的距离,两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变

left的值表示对象左边框与浏览器窗口左边的距离,right的值表示对象右边框与浏览器窗口右边的距离,两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-absolute</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }
        .sub {
            position: absolute;
            width: 50px;
            height: 50px;
        }
        .tl {
            top:0;
            left: 0;
            background: green;
        }
        .tr {
            top:0;
            right: 0;
            background: yellow;
        }
        .br {
            bottom:0;
            right: 0;
            background: black;
        }
        .bl {
            bottom:0;
            left: 0;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="sub tl"></div>
        <div class="sub tr"></div>
        <div class="sub br"></div>
        <div class="sub bl"></div>
    </div>
</body>
</html>

运行:


relative与absolute的主要区别  (内容参见博客 Position属性的四个值

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式

图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如下:

CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦 - love_heartbreaking

 

可 以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因 此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图:

 除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

总结:

  属性为relative的元素可以用来布局页面,属性为absolute的元素用来定位某元素在父级中的位置,既然属性为absolute的元素用来定位某元素在父级中位置,就少不了TRBL,这时候根据一开始讲的absolute的第三条,如果父级元素没有position属性那么 absolute元素就会脱离父级元素,但是如果是布局页面,父级元素position的属性又不能为absolute,不然就会以浏览器左上角为原点 了,所以父级元素的position属性只能为relative!

  如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

4.position 之 fixed  生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。


实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-fixed</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .ad-right-float {
            position: fixed;
            bottom: 50px;
            right: 0;
            width: 80px;
            height: 80px;
            background: gray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="ad-right-float">
        悬停广告
    </div>
</body>
</html>

运行:


5.position 之 sticky


实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-sticky</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        body {
            height: 800px;
            overflow: auto;
        }
        .logo {
            width: 100%;
            height: 50px;
            background: gray;
        }
        .nav {
            position: sticky;
            top:0;
            width: 100%;
            height: 50px;
            background: blue;
            color:#ffffff;
            cursor: pointer;
        }
        .con{
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="logo">
            想象我是网站头图
        </div>
        <div class="nav">
            想象这里是一堆的 banner 导航按钮 | 编辑 | 发布
        </div>
    </div>
    <div>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 
        </p>
    </div>
</body>
</html>

运行:(吸附效果)



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9905 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26756 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11544 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13645 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9127 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4417 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7285 0
+关注
136
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载