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(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...
随机推荐
- elasticsearch kibana logstash(ELK)的安装集成应用
官网关于kibana的学习指导网址是:https://www.elastic.co/guide/en/kibana/current/index.html Kibana是一个开源的分析和可视化平台,设计 ...
- python 数据处理 对txt文件进行数据处理
数据: 对txt文件进行数据处理: txt_file_path = "basic_info.txt" write_txt_file_path = "basic_info1 ...
- windows下 RN 环境搭建
01.安装 Android Studio 02.NodeJs 03.Python204.JDK 05.安装Genymotion模拟器06.java 环境配置07.andriud sdk 配置08.An ...
- HDU3306-Another kind of Fibonacci(矩阵构造)
Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- PHP数组——定义,类型,遍历数组,数组函数
1.定义 $attr=array(); //标准定义方式 $attr=[1,2]; $attr[0]="hello"; ...
- Django(一)基础:安装环境、创建项目、视图、创建一个项目的应用(app)
一.安装环境 参考: https://docs.djangoproject.com/zh-hans https://www.runoob.com/django/django-install.html ...
- python --- mysql数据库的操作
1.pymysql的初使用 import pymysql db_config = { 'host' :'127.0.0.1', 'user':'root', ', , 'database':'test ...
- netty权威指南学习笔记五——分隔符和定长解码器的应用
TCP以流的方式进行数据传输,上层应用协议为了对消息进行区分,通常采用以下4中方式: 消息长度固定,累计读取到长度综合为定长LEN的报文后,就认为读取到了一个完整的消息,将计数器置位,重新开始读取下一 ...
- 聚类之K均值聚类和EM算法
这篇博客整理K均值聚类的内容,包括: 1.K均值聚类的原理: 2.初始类中心的选择和类别数K的确定: 3.K均值聚类和EM算法.高斯混合模型的关系. 一.K均值聚类的原理 K均值聚类(K-means) ...
- Mysql 终端中文显示乱码
查看编码 show variables like 'char%'; 结果 +--------------------------+--------+ | Variable_name | Value | ...