定位属性

  位置属性position:static、relative、absolute、fixed

  偏移属性:top、bottom、left、right

  浮动定位属性:float/clear

1.浮动定位 float

-流定位(默认定位): 块级元素从上到下,行内元素在一行中从左到右排列水平布置。
-浮动定位:
-让元素脱离普通的流定位
-将浮动的元素放置在父元素的左边或者右边

float:left/right

浮动定位 需要通过float 属性来实现 ,值 none/left/right
配合 clear 属性使用
left/right/both
clear 属性不允许被清除浮动的元素的左右边挨着浮动元素 ,底层元素在被清除元素
的上下边添加足够的清除空间。

2.相对定位 relative

-元素会相对它原来位置偏移某个距离
-元素原本所占的空间不释放(不能叠加实体内容)
-position: relative 被元素设置为相对定位元素。
然后通过设置偏移属性 left/right/top/bottom 设置偏移量
  position:relative

    left:50px;  向右偏移50像素。

3.绝对定位 absolute

<!--
-绝对定位
-将元素的内容从当前定位中移除,释放空间
-使用偏移属性固定该元素的位置
-相对已定位的祖先元素<最近的父元素>进行位移。如果祖先元素都没有定位(没有position:relative/absolute),则相对最初包含它的块如body元素等进行位移
-position: absolute 被元素设置为绝对定位元素。
然后通过设置偏移属性 left/right/top/bottom 设置偏移量
-->

  position :absolute

    right:80px;  距离父元素右端80像素

4.fixed 固定定位

<!--
-固定定位
-将元素的内容固定在页面的某个位置
-当用户向下滚动页面时,元素框不会随着移动。
-不占页面空间,将元素从流定位中完全移除释放。
-position:fixed
然后通过设置偏移属性 left/right/top/bottom 设置偏移量
-->

position:fixed

  right:0px;

  bottom:0px;  固定图片在右下角

html_位置偏移属性position的更多相关文章

  1. frame、bounds表示大小和位置的属性以及center、position、anchorPosition

    在iOS开发开发过程中经常会用到界面元素的frame.bounds表示大小和位置的属性以及center.position.anchorPosition等单纯表示位置的属性.这些属性究竟什么含义?彼此间 ...

  2. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  3. css属性position的运用

    随着web标准的规范化,网页的布局也随之千变万化.各种复杂漂亮有创意的页面布局冲 击这人们的视野,相比以前的table布局那就不是一等级的事儿.这个很大一部分功劳是css 样式的引入.而这个多样性布局 ...

  4. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  5. JS魔法堂:关于元素位置和鼠标位置的属性

    一.关于鼠标位置的属性   1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件.   2. 鼠标事件对象Mous ...

  6. Java NIO(New I/O)的三个属性position、limit、capacity

    Java NIO(New I/O)的三个属性position.limit.capacity 在缓冲区中,最重要的属性有下面三个,它们一起合作完成对缓冲区内部状态的变化跟踪: capacity posi ...

  7. CSS定位属性Position详解

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

  8. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  9. 定位属性position

    定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...

随机推荐

  1. SelectList类的构造函数

    SelectList类的构造函数 2016年05月23日 17:29:52 FrankyJson 阅读数 272 标签: MVC函数 更多 个人分类: MVC   SelectList 构造函数 (I ...

  2. Java笔记: 初始化块

    Java语言提供了很多类初始化的方法,包括构造器.初始化器等.除了这两种方法之外,我们还可以用初始化块(initialization block)来实现初始化功能. 基本语法 初始化块是出现在类声明中 ...

  3. Element-UI Table 实现筛选数据功能

    最近产品提出了一个筛选数据的功能,要求在表头里实现一个下拉框进行筛选. 首先, Element-ui 的官方文档,el-table-column 下有一个 filters , 用于数据的筛选和过滤, ...

  4. Eclipse 不能调试的问题

    现象 弹出 Cannot connect to VM Console 中的输出是: ERROR: transport error 202: connect failed: Connection ref ...

  5. [JZOJ]1293.气象牛[区间DP]

    Description 为了研究农场的气候,Betsy帮助农夫John做了N(1 <= N <= 100)次气压测量并按顺序记录了结果M_1-M_N(1 <= M_i <= 1 ...

  6. 7.Python列表

    .button, #logout { color: #333; background-color: #fff; border-color: #ccc; } span#login_widget > ...

  7. 记录一次SQLServer 2019 MDS问题的排查

    问题表象: MDS网页里看不到任何建立的模型和实体. 用Excel add in连接,提示SQLServer授权过期. 但实际上SQLServer是企业版,目前并没有过期. 背景分析: 我们的环境是从 ...

  8. module已经装了但仍提示找不到的解决方法

    今天遇到的问题:(这里只是个例子) 解决方法: npm clean cache --force 删了node_modules 和 package-lock ,然后npm install 如果再不行,看 ...

  9. Sklearn 预处理数据

    ## 版权所有,转帖注明出处 章节 SciKit-Learn 加载数据集 SciKit-Learn 数据集基本信息 SciKit-Learn 使用matplotlib可视化数据 SciKit-Lear ...

  10. 浏览器输入URL后,发生了什么?(打开一个网页会使用哪些协议?)

    简单说来分为6个过程 1.DNS解析 互联网每一个服务器都是以ip地址作为界限的,并不是我们平时输入的url地址,就比如www.ccc.com这一个网址,当输入进浏览器之后就会由DNS解析将它转化成一 ...