定位属性

  位置属性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. 第1节 网站点击流项目(上):4、网站的数据采集,使用flume的taildir实现多个文件的监控采集

    一. 模块开发----数据采集 1. 需求 在网站web流量日志分析这种场景中,对数据采集部分的可靠性.容错能力要求通常不会非常严苛,因此使用通用的flume日志采集框架完全可以满足需求. 2. Fl ...

  2. solus linux 更新源

    添加源(清华大学开源软件镜像)sudo eopkg ar Solus https://mirrors.tuna.tsinghua.edu.cn/solus/shannon/eopkg-index.xm ...

  3. 008、MySQL日期时间格式化输出

    #日期格式化 SELECT date_format( '2008/08/08 22:23:01', '%Y-%m-%d-%H--%i--%s' ); 不忘初心,如果您认为这篇文章有价值,认同作者的付出 ...

  4. 传入sql语句,执行完提取内容赋值到控件上

    class procedure DBTools.FillStrings(ComboBoxEh: TDBComboBoxEh; sql: string; Default: Boolean = False ...

  5. Win10下数据增强及标注工具安装

    Win10下数据增强及标注工具安装 一.   数据增强利器—Augmentor 1.安装 只需在控制台输入:pip install Augmentor 2.简介 Augmentor是用于图像增强的软件 ...

  6. MFC中修改光标形状

    修改光标形状,如果是修改系统内光标形状,那就很简单了,直接是用::SetCursor(::LoadCursor(NULL,MAKEINTRESOURCE(IDC_CURSOR1)))就可以修改成功了, ...

  7. XV6操作系统代码阅读心得(五):文件系统

    Unix文件系统 当今的Unix文件系统(Unix File System, UFS)起源于Berkeley Fast File System.和所有的文件系统一样,Unix文件系统是以块(Block ...

  8. Python MySQL Delete

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  9. 第七篇:Python3连接MySQL

    第七篇:Python3连接MySQL 连接数据库 注意事项 在进行本文以下内容之前需要注意: 你有一个MySQL数据库,并且已经启动. 你有可以连接该数据库的用户名和密码 你有一个有权限操作的data ...

  10. PHP基础(9.27 第十三天)

    什么是PHP,为什么要学习PHP:  (1)php是嵌入html页面中的脚本语言   (2)目前最流行的网站开发语言  (3)在几乎所有平台中都可以运行  (4)很多企业都在使用PHP作为开发语言 P ...