一般情况下 页面元素的定位方式是根据文档流也就是说默认的从上到下,从左到右的方式进行排列的,而将元素从文档流脱离出来显示的方式有两种,一种是 position 定位另一种是float 浮动,这里我们详细介绍下position的用法。

position 常用的四种属性:

  1 static(默认属性)  2 relative(相对属性) 3 fixed(固定属性)4 (absolute 绝对属性)

position四种属性的用法:

static(默认属性):

这个没什么好说的就是将就是将定位方式还原到之前所提到的文档流的方式(也就是从上到下,从左到右的进行排列的方式 )这时候会忽略 top, bottom, left, right 或者 z-index 声明。

relative(相对属性):

这个属性是指元素会依据自己原先的位置为基准进行偏移,但是其原先位置依然会存在,不会干扰相邻的元素。

以div1,div2,div3,div4 为例,其原始位置为下图

我们以div2 为例,设置position:relative属性,代码及图如下:

 *{
margin: 0px;
padding: 0px;
}
.di1,.di2,.di3,.di4{
width: 100px;
height:100px;
text-align:center; }
.di1{
background-color: blue; }
.di2{
background-color: green;
position: relative;
left:100px;
top:100px; }
.di3{
background-color: red; }
.di4{
background-color: cornflowerblue; }

通过图片我们可以看到 div2 是以原先自己所在的位置向左 向上各偏移了100px;其原先的位置仍然会被保留 不会影响相邻的元素

3 fixed(固定属性)

这个属性是指以浏览器为基准进行偏移 并且不管怎么拖动滚动条,它都会保持原先的位置

4 (absolute 绝对属性)

绝对定位,当有一级父对象(无论是父对象还是祖父对象)的Position属性值为Relative或者absolute时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的以父级元素为基础进行定位,若没有父级定位则以浏览器为基准进行定位 并且会影响相邻的元素

我们依然以div2 为例,设置属性为absolute,代码及图片如下

.di1{
background-color: blue; }
.di2{
background-color: green;
position: absolute;
left:100px;
top:100px; }
.di3{
background-color: red; }
.di4{
background-color: cornflowerblue; }

可以看到下边的元素div3元素并没有设置定位 但是其偏移到了div2 原先的位置 ,

这就是我理解的position的用法,我也是之前学的,最近重新学习下,如果有什么不对的,还希望大家帮忙指正。

position的用法(top, bottom, left, right 四个定位属性配合进行使用)的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. position: absolute 如果不设置left, right, top, bottom会在什么位置

    一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图 1.一个大盒子中4个小盒子, 正常文档流布 ...

  3. CSS中Position 的用法详解。

    记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...

  4. position:sticky用法

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  5. 浮动清楚浮动及position的用法

    float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止 ...

  6. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

  7. Android View坐标Left, Right, Top, Bottom

    Android View坐标Left, Right, Top, Bottom 1.分析说明Left, Right, Top, Bottom View中对于该字段说明如下,相对父布局的的位置 相对父布局 ...

  8. C#Linq中的Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods,skip,take,takewhile,skipwhile,编译查询等

    我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...

  9. LINQ to SQL语句之Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods

    我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...

随机推荐

  1. 斯坦福经典AI课程CS 221官方笔记来了!机器学习模型、贝叶斯网络等重点速查...

    [导读]斯坦福大学的人工智能课程"CS 221"至今仍然是人工智能学习课程的经典之一.为了方便广大不能亲临现场听讲的同学,课程官方推出了课程笔记CheatSheet,涵盖4大类模型 ...

  2. Go解算法07整数反转

    描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321  示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 ...

  3. 将Python执行代码打包成exe可执行文件

    安装pyinstaller pip3 install pyinstaller 进入py文件目录,执行以下指令 pyinstaller -F -w <文件名.py>,-F代表生成可执行文件, ...

  4. pre-commit + imagemin 实现图片自动压缩

    我们日常开发的前端项目中,图片资源会占到项目资源的很大比例,因此在考虑到性能优化,页面加载速度的时候,如何更好地处理图片就非常重要了. 首先我们可以想到的方案是:使用webpack的image-web ...

  5. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  6. Spring Boot 整合视图层技术,application全局配置文件

    目录 Spring Boot 整合视图层技术 Spring Boot 整合jsp Spring Boot 整合freemarker Spring Boot 整合视图层技术 Spring Boot 整合 ...

  7. 高性能/并发的保证-Netty在Redisson的应用

    前言 ​ Redisson Github: https://github.com/redisson/redisson ​ Redisson 官网:https://redisson.pro/ Redis ...

  8. 使用gulp自动构建项目

    网址:https://segmentfault.com/a/1190000011514257

  9. 1006 Sign In and Sign Out (25 分)

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  10. Nagios监控服务

    Nagios监控服务 案例1:常用系统监控命令 案例2:搭建nagios监控服务器 案例3:配置文件及插件使用 案例4:监控远程主机的公有数据 案例5:监控远程主机的私有数据 1 案例1:常用系统监控 ...