css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位、绝对定位、固定定位的区别与特性
原文地址:http://www.qingzhouquanzi.com/106.html
css定位常用的有以下三种:
使用了定位的共同特性:
这三种定位可以设置四个值,但是通常只用到2个值就可以完成定位
如果只写了定位 没有设置偏移量,则元素位置都不会改变,默认值为原来的位置.
使用了定位,.元素会提升一个层级(如果与别的元素发生重叠,会在别的元素上面)
如果多个元素同时开启了定位.层级都一样的情况下.如果发生重叠.则后面的元素会盖住前面的元素
如果想调整层级 可以使用z-index:来调整层级,
需要注意的是
1.没有开启定位的元素不可以使用z-index属性
2.父元素的层级再高,也不会盖住子元素
相对定位(相对于元素原来的位置偏移)
position:relative;
left:
top:
绝对定位(相对于祖元素 偏移)
position:absolute;
left:
top:
固定定位(相对于浏览器窗口偏移)
position:fixed;
left:
top:
相对定位的特点:
1.相对定位的元素不会脱离文档流(所以元素在文档流中的特征他都包含)
2.相对定位元素会提升一个层级(如果与其他元素发生重叠 它会在上面)
3.相对定位不会改变元素的性质(块元素仍然是块元素,行内元素仍然是行内元素)
4.相对定位.但是不设置任何偏移值,.元素则不会有任何变化
绝对定位的特点:
1.绝对定位如果不设定任何偏移值,元素位置不会有任何改变(后面的就不一定了)
2.绝对定位会使得元素脱离文档流
3.绝对定位是相对于离他最近的开启了定位的元素进行定位的,如果都没有,则相对于body进行定位(所以通常给父元素也加一个定位)
4.绝对定位也会使得元素提升一个层级
5.绝对定位会改变元素的性质.行内元素会变成块状元素(因为会脱离文档流,也就是脱离文档流的特性)
固定定位:
固定定位也是绝对定位的一种.拥有绝对定位的大部分特点
但是他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位
css定位:相对定位、绝对定位、固定定位的区别与特性的更多相关文章
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...
- HTML定位——绝对定位和相对定位、固定定位
1.绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间. 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定为的 ...
- css 浮动 相对定位 绝对定位区别
今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...
- 关于网页设计的css+html相对定位和决定定位的理解
css中有很多定位,其中最重要的是相对定位和绝对定位: 定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握: 首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近 ...
- webapp中绝对定位/固定定位与虚拟键盘冲突的问题
$('body,html').height(document.body.clientHeight); 进入页面的时候就把高度固定住,这样虚拟键盘打开页面高度不会变化,你的布局也不会乱. 测试有效. 当 ...
- Day042---浮动 背景图设置 相对定位绝对定位
1.练习浮动 2.文本属性和字体属性 文本对齐 text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐 只适应于英文 text-indent ...
- CSS层定位——固定定位,相对定位,绝对定位
主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...
- [Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
随机推荐
- git-bash.exe参数
baidu搜了很多, 没有结果.估计大家都没有这个场景.google了一下, 几篇非常不错的结果: https://superuser.com/questions/1104567/how-can-i- ...
- 047:创建和映射ORM模型
创建ORM模型: ORM 模型一般都是放在 app 的 models.py 文件中.每个 app 都可以拥有自己的模型.并且如果这个模型想要映射到数据库中,那么这个 app 必须要放在 setting ...
- sql优化-派生表与inner-join
首先来说明一下派生表? 外部的表查询的结果集是从子查询中生成的.如下形式: select ... from (select ....) dt 如上形式中括号中的查询的结果作为外面select语句的查询 ...
- 【NOIP2016提高A组8.11】自然数
题目 分析 \(O(n)\)求出mex(1,i)(1<=i<=n): 虽然0<=ai<=10^9,但只有n个数,所以mex一定小于等于n for(long long j=1;j ...
- 2,Executor线程池
一,Executor框架简介 在Java 5之后,并发编程引入了一堆新的启动.调度和管理线程的API.Executor框架便是Java 5中引入的,其内部使用了线程池机制,它在java.util.co ...
- PHP文件操作基本代码
PHP中提供了一系列的I/O函数,能简捷地实现我们所需要的功能,包括文件系统操作和目录操作(如“复制[copy]”).下面兄弟连PHP培训 小编给大家介绍的是基本的文件读写操作:(1)读文件 ;(2) ...
- Spring——简介
学习网站: [1]http://spring.io/ [2]http://projects.spring.io/spring-framework/ Spring是为解决企业应用开发的复杂性而创建的,是 ...
- docker安装禅道
一.下载地址 禅道开源版: http://dl.cnezsoft.com/zentao/docker/docker_zentao.zip 数据库用户名: root,默认密码: 123456.运行时 ...
- Activiti创建表(三)
创建Mysql 创建 mysql 数据库 activiti(名字任意):CREATE DATABASE activiti DEFAULT CHARACTER SET utf8; pom.xml < ...
- Linux入门 文本编辑器
Vim vi -r file # 在上次使用vi编辑时发生崩溃,恢复file 在编辑多个文件时候 :n 下一个文件 :e# 回到刚才编辑的文件 撤销操作 撤销前一个命令 输入"u" ...