一、相对定位(position:relative)

1、相对定位:将盒子的position属性设置为relative;可通过left、top、right、bottom设置偏移量。

相对定位基础用法示例:

我们先在页面设置两个div盒子(第一个红色;第二个蓝色)

最初的位置

我们将第一个盒子进行相对定位;离左边200px;离顶部50px;

得到的效果是;

得出结论:

1、红色盒子是相对于盒子最初的位置向左偏移200px,向下偏移50px;

2、盒子偏移后也不会影响其他盒子;偏移后最初的位置会留下一个占位的。

二、绝对定位(position:absolute)

absolute用法示例:

1、我们设置一个div盒子box{设置好高度、边框和离页面顶部的距离};里面还装有两个小盒子,第一个红色,第二个蓝色;

最初的位置

然后我们让第一个红色盒子设置绝对定位属性{left:100px;top:100px;}

效果图如下:

结论:1、绝对定位的盒子,最初的位置不会再占用,后面的盒子会填上空缺;

2、在父元素(也就是大盒子box)没有position属性时,子元素(红色盒子)是以屏幕为参照物进行位置的定位的;

从上面所说,我们在大盒子box设置一个position属性时看看有没有什么不同的效果:

得到的效果是:

由此可见:如果父元素有position属性时;他就会以父元素为参照物进行偏移;当然如果父元素没有position这个属性,他就会一级一级往上找,

绝对定位相对于的位置偏移是发生在上层元素上是否有position这个属性,如果没找到,就相对于整个屏幕。
 
补充说明:Z-index可以设置层叠的置(绝对定位和相对定位都可以用),越大越在上层。(例如:z-index:1000;)
 

html/css中相对定位relative和绝对定位absolute的用法的更多相关文章

  1. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  2. 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题

    一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...

  3. 相对定位relative与绝对定位absolute

    relative:相对定位,并没有脱离原来文档流,依然在原来的位置上,可以通过设置left,top,来设置自己的偏移量,但是它依然占据自己原来的位置,偏移的位置会遮盖其他的元素 absolute:绝对 ...

  4. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

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

    1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏 ...

  6. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  7. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  8. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  9. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

随机推荐

  1. Java 性能优化(一)

    Java 性能调优(一) 1.衡量程序性能的标准 (1) 程序响应速度: (2) 内存占有情况: 2.程序调优措施 (1) 设计调优 设计调优处于所有调优手段 的上层,需要在软件开发之前进行.在软件开 ...

  2. python创建虚拟环境(Windows)

    >>>构建Python虚拟环境的目的是为了防止真实环境被破坏!!! >>>每一个项目建议用一个虚拟环境为了防止软件版本号冲突!!! 1.在终端切换到一个新的磁盘 如 ...

  3. Unity经典游戏教程之:弓之骑士

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  4. 灰度级分层(一些基本的灰度变换函数)基本原理及Python实现

    1. 基本原理 灰度级分层通常用于突出感兴趣的特定灰度范围内的亮度.灰度级分层有两大基本方法. 将感兴趣的灰度范围内的值显示为一个值(比如0),而其他范围的值为另外一个值(255). 将感兴趣的灰度范 ...

  5. The introduction of the book American daily English notes (enlarged edition)

    After reading the book of American daily English notes written by Linkun Yang[1], I think I should a ...

  6. python random 模块及验证码功能

    random模块 import random random.random() random.randint(1,3) # 1-3的整数包括3 import random print(random.ra ...

  7. 『深度应用』NLP机器翻译深度学习实战课程·零(基础概念)

    0.前言 深度学习用的有一年多了,最近开始NLP自然处理方面的研发.刚好趁着这个机会写一系列NLP机器翻译深度学习实战课程. 本系列课程将从原理讲解与数据处理深入到如何动手实践与应用部署,将包括以下内 ...

  8. DataPipeline丨DataOps的组织架构与挑战

    作者:DataPipeline CEO 陈诚 前两周,我们分别探讨了“数据的资产负债表与现状”及“DataOps理念与设计原则”.接下来,本文会在前两篇文章的基础上继续探讨由DataOps设计原则衍生 ...

  9. 【openmp】for循环的break问题

    问题描述:在用openmp并行化处理for循环的时候,便无法在for循环中用break语句,那么我们如何实现这样的机制呢?在stackoverflow上看到一个不错的回答总结一下. volatile ...

  10. 洛谷 P1177 【模板】快速排序

    这道题用传统快排(如下所示)的结果就是最后三个点TLE: void swap(int &a, int &b) { int tmp = a; a = b; b = tmp; } void ...