浅谈 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 ...
随机推荐
- while counter<10:
[root@chenbj test]# python Python 2.7.5 (default, Nov 6 2016, 00:28:07) [GCC 4.8.5 20150623 (Red Hat ...
- 20145238 —《Java程序设计》—第5周学习总结
20145238 <Java程序设计>第5周学习总结 教材学习内容总结 第八章异常处理 8.1.1使用try.catch ·教材范例用户连续输入整数,输入0结束后显示输入数的平均值(代码如 ...
- scrapy install
csf@ubuntu:~$ sudo apt install python-scrapy
- 批量删除xml文件中的<?xml version="1.0" ?>
#!/bin/shcd 'home/usrname/'ls cd '/home/usrname/VOC2007/Annotations/' for file in `ls /home/usrname/ ...
- python模块之正则
re模块 可以读懂你写的正则表达式 根据你写的表达式去执行任务 用re去操作正则 正则表达式 使用一些规则来检测一些字符串是否符合个人要求,从一段字符串中找到符合要求的内容.在线测试网站:http:/ ...
- java 打印流 递归复制子文件子文件夹 不同编码文件复制到同一文件中 序列化流反序列化流
package com.swift.jinjie; import java.io.BufferedInputStream; import java.io.File; import java.io.Fi ...
- C# 委托知识总结【转】
1.什么是委托,为什么要使用委托 我正在埋头苦写程序,突然想喝水,但是又不想自己去掉杯水而打断自己的思路,于是我就想让女朋友去给我倒水.她去给我倒水,首先我得让她知道我想让她干什么,通知她之后我可以继 ...
- Linux文件服务器实战(匿名用户)
一.进程与线程 二.vsftp服务器 1.文件传输协议(file transfer protocol,FTP) 基于该协议ftp客户端和服务端实现文件共享,上传下载文件 FTP基于TCP协议生成一个虚 ...
- 大数据学习(一) | 初识 Hadoop
作者: seriouszyx 首发地址:https://seriouszyx.top/ 代码均可在 Github 上找到(求Star) 最近想要了解一些前沿技术,不能一门心思眼中只有 web,因为我目 ...
- 解决.NET Core R1中文乱码问题
今天写了一个简单的.NET Core RC1控制台程序,发现中文显示一直是乱码.查看操作系统设置,没有问题:查看源文件编码,也没有问题:甚至查看了Console字符编码相关的注册表,依然没有发现问题. ...