浅谈 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 ...
随机推荐
- 【PHP 基础类库】Prototype 原型版教学文章!
前言 大家好我是:石不易,今天我为大家带来了PHP基础类库原型版的教学文章,至此本人的作品线已分为三大类,分别是:JavaScript前端框架(封装库).PHP模板引擎.以及PHP基础类库.该类库历时 ...
- 宝塔linux面板,修改root密码
root,密码忘记了.但宝塔vps的密码没忘记... 翻完宝塔linux面板都没看到有修改系统root密码的选项,后来尝试定时任务shell,也没成功, 最终快绝望的时候,发现通过添加插件成功修改密码 ...
- 2018.9.3 CEP课程总结
什么是CEP课程? 职业生涯规划课程 蓝桥介绍 立人达人 全人教育 人文 重视人 尊重人 关心人 爱护人 人才 人格 简历的制作 找工作的流程? 1.简历的准备------>投发简历(自己投.老 ...
- Spring boot 集成 Swagger
添加依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...
- Java中阻塞队列的使用
http://blog.csdn.net/qq_35101189/article/details/56008342 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如 ...
- fcn
上几周把fcn跑了几个模型,唉,因此测试程序,整了很久,浪费时间啊. fcn做分割,其实我是想用来做检测的,但是总是觉得这个框架是以后的趋势,所以一直想要去在这个基础上做个东西,目前训练的模型还没有测 ...
- xpath模块
W3School官方文档:http://www.w3school.com.cn/xpath/index.asp 我们使用xpath主要是获取网页数据的,之前一直是使用bs4,xpath也是最近了解到的 ...
- python基本使用时常见错误
python基本使用时常见错误 字符编码错误 如果要学习计算机编程语言,首先就要搞懂字符编码,否则在以后的学习过程中,将会是一场噩梦.在一开始使用的时候,我就遇到了很多的关于字符编码的问题,做个简单的 ...
- Javascript入门笔记1-script标签
1.script标签在HTML文件中添加JavaScript代码. JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript ...
- python解析ini文件
python解析ini文件 使用configparser - Configuration file parser sections() add_section(section) has_section ...