浅谈 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 ...
随机推荐
- LA 3708 墓地雕塑
题目链接:https://vjudge.net/contest/132704#problem/D 题意:一个长度为10000的园上,均匀分布n个雕塑,现在要加入m个雕塑,这样原先的就可能会移动,求移动 ...
- 广搜,深搜,单源最短路径,POJ(1130),ZOJ(1085)
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=85 http://poj.org/problem?id=1130 这 ...
- 轻量级HTTP服务器Nginx(入门与安装篇)
轻量级HTTP服务器Nginx(入门篇) 文章来源于南非蚂蚁 一.什么是Nginx 相信很多读者都对Apache非常熟悉,与Apache类似,Nginx是一款高性能的HTTP和反向代理服务器软 ...
- 2018年第九届蓝桥杯【C++省赛B组】第二题 明码
汉字的字形存在于字库中,即便在今天,16点阵的字库也仍然使用广泛.16点阵的字库把每个汉字看成是16x16个像素信息.并把这些信息记录在字节中. 一个字节可以存储8位信息,用32个字节就可以存一个汉字 ...
- oracle: listener.ora 、sqlnet.ora 、tnsnames.ora的配置及例子
1.解决问题:TNS或者数据库不能登录. 最简单有效方法:使用oracle系统提供的工具 netca 配置(把原来的删除掉重新配置) $netca 2.然而,仍有疑问:如何指定'l ...
- bootstarp v3 学习简记
1.快速设置浮动通过这两个class让页面元素左右浮动. !important被用来避免某些问题. <div class="pull-left">...</div ...
- Siamese Network
摘抄自caffe github的issue697 Siamese nets are supervised models for metric learning [1]. [1] S. Chopra, ...
- rnn,cnn
http://nikhilbuduma.com/2015/01/11/a-deep-dive-into-recurrent-neural-networks/ 按照这里的介绍,目前比较火的cnn是fee ...
- 前端框架之bootstrap及相关技术网站
1.web框架之bootstrap bootstrap来源Twitter,是一个CSS/HTML框架,它是基于HTML,CSS,JavaScript下的,使用简洁,当中提供了很多HTML和CSS 如用 ...
- 深入理解HashMap底层实现原理
一.HashMap (JDK8)put(K key, V value)底层实现 1. 首先判断这个hashmap是否为空,为空就初始化一个hashmap 2. 根据key 计算hashcode()值, ...