定位属性

  位置属性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. VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i

    <script> export default {     name:'header'       //  不要使用内置或保留的HTML元素 , 改为Header或者置或保留的HTML元素 ...

  2. python的super()以及父类继承

    Python中子类调用父类的方法有两种方法能够实现:调用父类构造方法,或者使用super函数(两者不要混用). 使用“super”时经常会出现代码“super(FooChild,self).__ini ...

  3. WEB前端资源项目整合

    WEB前端资源项目整合 vue.js高仿饿了么(1-13章全)链接:https://pan.baidu.com/s/1qYSiYXluA1AlEV0EskxWZw提取码:25z9 Vue.js 2.5 ...

  4. PHP mb_substr mbstring 函数

    定义和用法 mb_substr - 获取部分字符串 版本支持 PHP4 PHP5 PHP7 支持 支持 支持 5.4.8 length 传入 NULL,则从 start 提取到字符串的结尾处. 在之前 ...

  5. pyhton pandas数据分析基础入门(一文看懂pandas)

    //2019.07.17 pyhton中pandas数据分析基础入门(一文看懂pandas), 教你迅速入门pandas数据分析模块(后面附有入门完整代码,可以直接拷贝运行,含有详细的代码注释,可以轻 ...

  6. URL短网址系统的算法设计及实践

    在通常情况下,URL是由系统生成的,通常包括URI路径,多个查询参数,可以对参数进行加密和解密.当人们要分享某个URL,比如短信,邮件,社交媒体,这就需要短URL. 而短网址,顾名思义就是在长度上比较 ...

  7. 在excel表格里,为所有数字添上绿色小三角

    在excel表格里,为所有数字添上绿色小三角的方法有4种: 1. 为一个单元格添加:直接在单元格里添加一个英文的逗号 2. 为一列数据添加:选中要添加绿色小三角的列,选择 数据-->分列--&g ...

  8. Redis数据类型及其操作

    redis数据类型即操作 1. 字符串 set 设置字符串 格式: set key value 例子: set name kainhuck get 获取字符串的值 格式: get key 例子: ge ...

  9. 深入浅出KNN算法

    概述 K最近邻(kNN,k-NearestNeighbor)分类算法 所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代表. kNN算法的核心思想是如果一个样本在特征 ...

  10. Mysql 终端中文显示乱码

    查看编码 show variables like 'char%'; 结果 +--------------------------+--------+ | Variable_name | Value | ...