CSS的绝对定位和相对定位

时间:2021-06-22 19:22:13

css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top、bottom、left、right一起使用来确定一个标签的位置。

1、position:absolute(绝对定位):

  标签的position被设置为absolute后,表示绝对定位,位置是从浏览器窗口的左上角算起,比如div:{position:absolute;top:100px;left:200px},表示此div距离浏览器窗口左边200px,距离顶部100px;绝对定位的标签会脱离文档流,不再占用文档流的空间,可以使用z-index来决定其堆叠顺序。

2、position:relative(相对定位):

  标签的position被设置为relative后,表示相对定位,位置是从其原来的位置上算起,比如div:{position:relative;top:10px;left:20px;},表示此div距离其原来的位置左边20px;距离上边10px;相对定位不会脱离文档流,仍然占据原来的空间,因此可能会覆盖其它框。

3、如果父标签是相对定位,其子标签是绝对定位,则子标签不在想对于浏览器窗口的左上角位置,而是相对于父标签的左上角的位置。

CSS的绝对定位和相对定位的更多相关文章

  1. css中绝对定位和相对定位的区别

    先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...

  2. css中绝对定位和相对定位详解

    相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...

  3. 【CSS】绝对定位和相对定位

    html:定位层 特点: >>完全脱离默认文档流,独立于立体层面的Z轴之上. >>和float浮动一样都脱离了默认文档流,但float元素与默认文档流之间会相互产生影响,而定位 ...

  4. css 浮动 绝对定位 和 相对定位

    html是按照文件流(文档流)的方式加载的,但是全部是文档流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先,按照文档流和非文档流来分类: ①文档流:就是按照上下 ...

  5. css position 绝对定位和相对定位

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  6. div+css位置绝对定位和相对定位

    position:absolute: 当div中被隔着些元素的话那么用此方法将把元素重叠在一起,所以元素可以不在容器中加也能重叠在一起

  7. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  8. [Web 前端] CSS 盒子模型,绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  9. Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用

    1.div层的浮动 1)div向左浮动.向右浮动 <!doctype html> <html> <head> <meta charset="utf- ...

随机推荐

  1. Spring Data JPA 查询方法支持的关键字

    Table 2.3. Supported keywords inside method names Keyword Sample JPQL snippet And findByLastnameAndF ...

  2. HBase的数据迁移(含HDFS的数据迁移)

    1.启动两个HDFS集群 hadoop0,hadoop1,都是伪分布式的集群 2.启动hadoop3的zookeeper与hbase 注意点:需要开启yarn服务,因为distcp需要yarn. 3. ...

  3. discuz 发布分类信息,能不能设置单版块去掉&OpenCurlyDoubleQuote;发帖子”(默认点发帖后为自定义的默认分类信息模版)

    http://www.discuz.net/forum.php?mod=viewthread&tid=3365198&page=1#pid26849156

  4. hdu 2051 Bitset (java)

    问题: 之前做过类似题,但这次仍然不能解决相关问题. 字符串倒过来输:StringBuffer str=new StringBuffer(s); s=str.reverse().toString() ...

  5. 【原创】poj ----- 2524 Ubiquitous Religions 解题报告

    题目地址: http://poj.org/problem?id=2524 题目内容: Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 6 ...

  6. Tensorflow实践:CNN实现MNIST手写识别模型

    前言 本文假设大家对CNN.softmax原理已经比较熟悉,着重点在于使用Tensorflow对CNN的简单实践上.所以不会对算法进行详细介绍,主要针对代码中所使用的一些函数定义与用法进行解释,并给出 ...

  7. Ubuntu16&period;04 ionic&lpar;jdk&comma;sdk&comma;gradle&rpar;环境搭建完全攻略

    在Ubuntu16.04当中搭建一个ionic环境还是按照官方教程的来,主要问题是首先要把JDK,SDK搭好,环境变量配好.本文中给的包的下载请不要直接用浏览器下载,很慢,尽量用wget 下载,重要的 ...

  8. Java 多线程 同步和异步

    同步和异步通常用来描述一次方法调用.一旦开始调用同步方法,调用者必须等到方法调用返回后,才能执行后续操作.一旦开始调用异步方法,方法调用会立即返回,调用者可以执行后续操作.异步方法会在另外一个线程中真 ...

  9. chart 数据 图表插件

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js">&lt ...

  10. 情感分析snownlp包部分核心代码理解

    snownlps是用Python写的个中文情感分析的包,自带了中文正负情感的训练集,主要是评论的语料库.使用的是朴素贝叶斯原理来训练和预测数据.主要看了一下这个包的几个主要的核心代码,看的过程作了一些 ...