之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性。当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结。在这里会注明借鉴或引用文章的出处。侵权即删。


position属性值包括 static,relative,absolute,fixed,sticky(实验属性)5种。

1.static

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时设置 top, right, bottom, left 和 z-index 属性无效

   <style>
.parent{
background-color: red;
width: 100px;
height: 100px;
}
.static{
width: 50px;
height: 50px;
/* position: static;
top: 10px; 这段注释代码加与不加没有区别
left: 10px;*/
background: blue; }
</style>
<div class="parent">
<div class="static"></div>
</div>



chrome浏览器运行草图

2.relative

该关键字指定元素 即在不改变页面布局的前提下相对于自身原来位置调整元素位置(原来位置仍然保留)。position: relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效

<style>
.parent{
background-color: red;
width: 120px;
height: 120px;
}
.one{
width: 30px;
height: 30px;
background: green; }
.two{
width: 30px;
height: 30px;
background: blue;
position: relative;
left: 10px;
top: 10px;
}
.three{
width: 30px;
height: 30px;
background: yellow;
} </style>
<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>

浏览器运行效果如下

3.absolute

不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。



此时绿色方块平移,而原来位置不再保留,其相邻元素填充它原来位置并且是相对于html移动,脱离文档流。

假如修改.parent代码添加 position:relative。

	.parent{
background-color: red;
width: 120px;
height: 120px;
position: relative;
/*left:0;*/
right: 0;
}

left:0;(绿色方块覆盖蓝色 )

right:0;(绿色方块相对于红色方块平移)

这两图说明绿色(.one)相对于父元素移动.

相对于 最近的 非 static 定位祖先元素的偏移,来确定元素位置

4.fixed

不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

<style>
body{
height: 2000px;
width: : auto;
}
.parent{
background-color: red;
width: 1360px;
height: 50px;
position: fixed;
bottom: 0;
}
</style>
<body>
<div class="parent">
</div>
</body>



即 在滚动界面时 div.parent 始终 固定页面底部

5.sticky

盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同

这个不大好演示请大家看文档 sticky效果图

本文同时借鉴了 Wayne Zhu 的文章

理解css之position属性的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  3. 转:深入理解css中position属性及z-index属性

    原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...

  4. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  5. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  6. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  7. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. 理解 CSS 的 z-index 属性

    通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素. 所有的盒模型元素都处于三维坐标系中. 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, ...

随机推荐

  1. python logging method 02

    基本用法 下面的代码展示了logging最基本的用法.     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

  2. 用Java制作一个简单的图片验证码

    //Java实现简单验证码功能 package project; import java.awt.Color; import java.awt.Font;import java.awt.Graphic ...

  3. 在AspNetCore 中 使用Redis实现分布式缓存

    AspNetCore 使用Redis实现分布式缓存 上一篇讲到了,Core的内置缓存:IMemoryCache,以及缓存的基础概念.本篇会进行一些概念上的补充. 本篇我们记录的内容是怎么在Core中使 ...

  4. Collection、List、Set集合概括

    1.Collection是一个接口,定义了集合相关的操作方法,其有两个子接口List和Set. 2.List和Set的区别    List是有序的可重复集合,Set是无序的不可重复集合. 3.集合持有 ...

  5. 20个大大节省你时间的HTML5开发工具

    Rendera 如果你希望有个环境可以测试.浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果.类似 RunJS. Patternizer ...

  6. python3 [爬虫实战] selenium 爬取安居客

    我们爬取的网站:https://www.anjuke.com/sy-city.html 获取的内容:包括地区名,地区链接: 安居客详情 一开始直接用requests库进行网站的爬取,会访问不到数据的, ...

  7. GitHub 系列之「团队合作利器 Branch」

    Git 相比于 SVN 最强大的一个地方就在于「分支」,Git 的分支操作简直不要太方便,而实际项目开发中团队合作最依赖的莫过于分支了,关于分支前面的系列也提到过,但是本篇会详细讲述什么是分支.分支的 ...

  8. 新浪微博注册(elenium Python 自动化)

    from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom time import sleep ...

  9. Netty 学习 一、初识Netty【原创】

    在过去几年的工作和学习中,比较关注高层次的应用开发,对底层探究较少.实现Web应用的开发,主要依赖Tomcat.Apache等应用服务器,程序员无需了解底层协议,但同样限制了应用的性能和效率.现在开始 ...

  10. 【BZOJ 2004】: [Hnoi2010]Bus 公交线路

    题目链接: TP 题解:   所以说,超显眼的数据范围啊. 很显然我们对于每个P的区间都是要有k个站被bus停留,然后考虑转移的话应该是把这k个站里的某个bus往前走,那么转移也很显然了,n的范围很大 ...