浅谈 css 之 position用法
在 css中, position 属性有四个值可用: static(默认值)、absolute、relative、fixed。
relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置)
absolute:
1、相对于自身的包含块定位;
2、寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块;如果没有的话,则相对于 html进行定位;
3、完全脱离文档流;
4、display的取值类似于inline-block;
5、不缩短行框
fixed:
完全脱离文档流,和 absolute 的唯一的区别就在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。即使窗口是滚动的它也不会移动
说到 position,就要再说一下 [Z-index] (垂直定位)
Z-index 默认值为0;这种情况下,后者会覆盖前者,需要改变元素之间层级关系的话,就要通过改变 Z-index 值来实现了,Z-index值越大优先级就越高。
浅谈 css 之 position用法的更多相关文章
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- 浅谈CSS模块化
为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...
- 浅谈css中的position
什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 浅谈css常用伪类用法
着重写一下after和before的用法: css样式搞定:标签元素+伪类after a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称 content: '已打包'; ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
随机推荐
- 2017.11.24 算法分析与设计------Gay格雷码
1. 格雷码问题: 对于给定的正整数n,格雷码为满足如下条件的一个编码序列: (1) 序列由2n个编码组成,每个编码都是长度为n的二进制位串. (2) 序列中无相同的编码. (3) 序列中位置相邻的两 ...
- 2017.9.29 web网上答题及其自动评测系统
1. 设计计一个网上答题及其自动评测系统,首先是试题页面的设计及其解答的提交, 其次是当提交解答之后,系统自动评阅并给出结果. 分析:需要两个jsp页面:一个是提交信息的页面,另一个是获取提交信息的页 ...
- mysql关键字了解
unsigned 无符号 就是没有负数 列-1 -2 auto_increment 自增 comment 注释 primary key 主键 foreign key () references ...
- 第29章 电容触摸屏—触摸画板—零死角玩转STM32-F429系列
第29章 电容触摸屏—触摸画板 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fir ...
- django验证码功能
1.目的 现在我们一般访问网页都需要输入验证码,比如博客园,有的甚至是通过手机验证码实时登录.这样做的目的主要还是为了防止其他人的恶意访问,比如爬虫,下面就来看看验证码是如何实现的 2.StringI ...
- css 伪类选择器制作登录框表单
使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...
- jQuery选择器与事件学习笔记
层次选择器: $("div li")获取div下的所有li元素(后代.子.子的子......) $("div>li")获取div下的直接li子元素. ...
- 触发ionic弹窗区域外的方法
最近项目需要在页面弹窗的时候需要点击弹窗区域外的地方,其实也就是点击页面HTML就可以关闭弹窗, 首先在controller通过js获取到html的dom节点,然后绑定点击事件,话不多说上代码: ...
- Struts2基础入门
Struts2基础入门 创建一个web工程 0)导包并且创建一个核心配置文件 <?xml version="1.0" encoding="UTF-8"?& ...
- Ubuntu 下安装GIMP
1.Add GIMP PPA Open terminal from Unity Dash, App launcher, or via Ctrl+Alt+T shortcut key. When it ...