position 定位

指将原始摆放到页面的任意位置。

继承性:no

默认值:static        没有定位,原始出现在正常的文档流中

可选值:

static :    默认值,元素没有开启定位

relative :    开启元素的相对定位

absolute :    开启元素的绝对定位

fixed :    开启元素的固定定位,固定定位也是绝对定位的一种。

当开启 position 定位后,可以使用 left,top,right,bottom 进行偏移设置


 

1. position: relative; 相对定位

(1) 当开启了相对定位以后,如果不设置偏移量,则元素不会发生任何变化

(2) 相对原来位置进行偏移

left:相对于 元素原来位置的 左侧偏移量。

top:相对于 元素原来位置的 上侧偏移量。

right:相对于 元素原来位置的 右侧偏移量。

bottom:相对于 元素原来位置的 下侧偏移量。

(3) 相对定位 会使元素提升一个层级,从而盖住原来的同级或者低级的元素。

(4) 元素定位以后,不会脱离文档流,始终占据原来位置。

(5) 相对定位 不会改变元素的性质,块还是块,内联还是内联。

(6) 元素定位以后,不会影响其他元素的布局。


2. position: absolute; 绝对定位

(1) 当元素开启了绝对定位以后,会脱离文档流。

(2) 如果不设置偏移量,则元素的位置不会发生变化。

(3) 坐标原点 在 “浏览器 / 最近的开启了定位祖先元素”  的左上角。

(4) 开启绝对定位以后,如果不设置宽高,则会不显示。

(5) 绝对定位 会改变元素的性质,内联元素会变成块元素,块元素的width和height都会被内容撑开。


3. position: fixed; 固定定位

(1) 固定定位 也是一种绝对定位。

(2) 不同的是,固定定位永远都只会相对于浏览器窗口左上角进行定位。

(3) 意味着,就算滑动滚动条滚动页面,元素也会固定于浏览器窗口的某个位置。

(4) 应用:固定迷你视频,固定悬浮广告,滚动客服,回到顶部,回到底部。

(5) 缺点:IE6及以下不支持。。。必须用JS去实现。

__x__(34)0908第五天__ 定位 position的更多相关文章

  1. __x__(35)0908第五天__ 层级 z-index

    如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...

  2. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  3. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  4. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  5. __x__(36)0908第五天__背景 background

    1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...

  6. __x__(32)0908第五天__Photoshop的基本操作

    1. 设置 Photoshop 的单位为 像素px 2. 标尺   显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1    放大到100% Ctrl + 0    适应屏幕 Alt + ...

  7. __x__(35)0908第五天__opacity 透明度

    opacity 透明度 设置一个  0 - 1 之间的值. opacity: 0;    完全透明 opacity: 0.5    半透明 opacity: 1;    完全不透明 缺点: IE8及以 ...

  8. __x__(37)0909第五天__背景图按钮

    link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...

  9. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

随机推荐

  1. SpringBoot项目@RestController使用 redirect 重定向无效

    Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可. 而Spring Boot当我们使用了@RestCont ...

  2. Mac 终端美化方法

    美化终端,主要是主题,字体,命令行提示3个方面. 主题 使用的主题是Solarized Dark主题. 安装主题: git clone git://github.com/altercation/sol ...

  3. css 兼容各种iPhone

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @m ...

  4. 基于Windows,Python,Theano的深度学习框架Keras的配置

    1.安装Anaconda 面向科学计算的Python IDE--Anaconda 2.打开Anaconda Prompt 3.安装gcc环境 (1)conda update conda (2)cond ...

  5. win2003 创建nds辅助服务器 步骤

    准备条件:win2003系统DNS主机 win2003系统 DNS副机  在同一局域网下: 目标.新建个laohu.com 主机并添加副机 再 正向查找区域 右键新建区域---下一步--- 选择主要区 ...

  6. vue全局引入scss文件(推荐)

    <template> <div id="app"> <router-view/> </div> </template> ...

  7. png

  8. 【easy】206. Reverse Linked List 链表反转

    链表反转,一发成功~ /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; ...

  9. docker镜像的使用及相关

    参考网站docker中文网:http://www.docker.org.cn/book/docker/docker-push-image-13.html 1.搜索容器: docker search t ...

  10. rsyslog磁盘辅助(Disk-Assisted)模式踩坑记

    最近公司为方便tracing.排查, 搞全链路日志收集,而我手上的10亿+pv的动态前端服务必然在考虑之列. 之前呢. 都是运维定制的收集方式: 如上图,rsyslog push kafka, 优点嘛 ...