position的用法(top, bottom, left, right 四个定位属性配合进行使用)
一般情况下 页面元素的定位方式是根据文档流也就是说默认的从上到下,从左到右的方式进行排列的,而将元素从文档流脱离出来显示的方式有两种,一种是 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 四个定位属性配合进行使用)的更多相关文章
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- position: absolute 如果不设置left, right, top, bottom会在什么位置
一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图 1.一个大盒子中4个小盒子, 正常文档流布 ...
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
- position:sticky用法
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- 浮动清楚浮动及position的用法
float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止 ...
- 【CSS】position relative 用法
Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...
- Android View坐标Left, Right, Top, Bottom
Android View坐标Left, Right, Top, Bottom 1.分析说明Left, Right, Top, Bottom View中对于该字段说明如下,相对父布局的的位置 相对父布局 ...
- 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 ...
- LINQ to SQL语句之Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods
我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...
随机推荐
- Word文档转html并提取标题
最近做了一个功能,需要将word文档转化成html的格式,并提取出标题生成导航.考虑到功能的复杂程度,将需要降低为对“标题1”这种格式进行提取. docx为后缀的文档(word2007)支持XML的文 ...
- 在EF中使用SQL执行简单高效的增删查操作
随着平台数据的积累,对于数据访问的速度要求愈来愈高.优化后台访问性能,将是之后的一个重点任务. 但是,后台在项目开发初期采用的是Abp(Lite DDD)框架,集成EnityFramework.因为之 ...
- 延时对象promise的使用
promise是ES6(ECMA Script6)的新标准,只能在支持ES6的浏览器中使用 Promise是一个延时对象,创建延时对象时需要传入一个函数类型的参数 这个函数有两个参数:resolve和 ...
- 不可被忽视的操作系统( FreeRTOS )【2】
本文章总结基于官方FreeRTOS手册,测试系统为ESP32的IDF 4.0 本篇续上一篇<不可被忽视的操作系统( FreeRTOS )[1]> 其中上一篇主要内容为: FreeRTOS介 ...
- 第一个AWK程序的尝试
为了统计API的访问,需要读取8个G的数据,所以学习了下文本处理神器,AWK.简单实例如下: # 以\t分割的文本 awk -F "\t" ' //获取小时的函数 function ...
- Lisp-01: 相关开发环境配置部署
Common Lisp 学习笔记系列01 要学一门编程语言,首先需要将语言的环境配置好.如果想要个直接上手的环境,感谢日本的大神 Shirakumo,打造了一个 Common Lisp 的 IDE - ...
- 如何让Java应用成为杀不死的小强?(下篇)
各位坐稳扶好,我们要开车了.不过在开车之前,我们还是例行回顾一下上期分享的要点. 经过前两期的铺垫及烧脑的分享,我们大概对「如何实现 Java 应用进程的状态监控,如果被监控的进程 down 掉,是否 ...
- 关于github报错:ssh: connect to host github.com port 22: Connection timed outfatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.
当执行git命令如:git clone.git pull等等 出现报错:ssh: connect to host github.com port 22: Connection timed outfat ...
- sql server 表连接类型
一.数据库访问操作 1.SCAN(最影响性能点,优化切入点) 根据表的不同,分为Table Scan,Cluster Index Scan,Non-clustered Index Scan Table ...
- K:leetcode 5381.查询带键的排列 这题简单,但我还能优化。精益求精,才是算法的乐趣所在!
前言: 本题来自leetcode第184场周赛的第二小题.以前参加过周赛,觉得很有趣.苦于最近一段时间比较忙就没坚持参加了(实际上是借口来着....),由于昨晚思考一些事情,导致睡不着,所以起得有点早 ...