html_位置偏移属性position
定位属性
位置属性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的更多相关文章
- frame、bounds表示大小和位置的属性以及center、position、anchorPosition
在iOS开发开发过程中经常会用到界面元素的frame.bounds表示大小和位置的属性以及center.position.anchorPosition等单纯表示位置的属性.这些属性究竟什么含义?彼此间 ...
- jQuery获得元素位置offset()和position()的区别
jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...
- css属性position的运用
随着web标准的规范化,网页的布局也随之千变万化.各种复杂漂亮有创意的页面布局冲 击这人们的视野,相比以前的table布局那就不是一等级的事儿.这个很大一部分功劳是css 样式的引入.而这个多样性布局 ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- JS魔法堂:关于元素位置和鼠标位置的属性
一.关于鼠标位置的属性 1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件. 2. 鼠标事件对象Mous ...
- Java NIO(New I/O)的三个属性position、limit、capacity
Java NIO(New I/O)的三个属性position.limit.capacity 在缓冲区中,最重要的属性有下面三个,它们一起合作完成对缓冲区内部状态的变化跟踪: capacity posi ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- 定位属性position
定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...
随机推荐
- Java的equals方法的使用技巧
Java的equals方法的使用技巧 1.业务场景: 在某个社交软件中,要求每个用户的用户名(name)必须独一无二,那么在每次增加新用户的时候,都要对该用户的注册名进行判断,如果当前用户名已经被占用 ...
- 2020寒假 05 ——eclipse安装scala环境
在eclipse中安装Scala环境 1安装eclipse插件步骤,点击help,选择Eclipse Marketplace 2.输入Scala,点击go 3.选择搜索到的Scala IDE 4.7. ...
- 八、Delphi10.3读取JSON文件,并修改JSON数组一条内容后保存到文件
一.我们有一个JSON文件,如下: { "在野": [ { "城池": 0, "武将": 74, "登场年": 190 ...
- nginx配置多个项目
使用Nginx要在同一个域名下配置多个项目有两种方式: nginx按不同的目录分发给不同的项目 启用二级域名,不同的项目分配不同的二级域名 1.nginx按不同的目录分发给不同的项目: server ...
- NIO 与 零拷贝
零拷贝介绍 零拷贝是网络编程的关键, 很多性能优化都需要零拷贝. 在 Java程序中, 常用的零拷贝方式有m(memory)map[内存映射] 和 sendFile.它们在OS中又是怎样的设计? NI ...
- yolov3.cfg参数解读
对于模型的优化,我们可以通过适当修改网络基本配置信息完成训练上的优化. yolov3.cfg文件: [net]# Testing #测试模式 batch=1 subdivisions=1# Train ...
- DNS and Bind
DNS : 工作在应用层 DNS 作用 : 完成域名到IP的解析过程 FQDN --> IP 例如 : www.ifeng.com --> 123.103.122.24 D ...
- 谈谈对MapTask任务分配和Shuffle的理解
一.切片与MapTask的关系 1.概述 大家要注意区分切片与切块的区别: 切块Block是HDFS物理上把数据分成一块一块的,默认是128M: 数据切片:只是在逻辑上对输入进行分片,并不会在磁盘上分 ...
- MongoDB_01
解释:MongoDB可应对 --三高需求 High performance-对数据库高并发读写的需求 Huge Storage -对海量数据的高效率存储和访问的需求 High Scalability ...
- Java之集合
前言: 在写程序当中,集合会经常使用,今天听了马老师的课,写一些自己的总结 正文: 集合最重要的就是一个图,一个类,三个知识点,六个接口 说到图就是上面的图,这个图可以帮我们理解这些接口的继承关系 1 ...