一、position:relative 相对定位

分两种情况分析:

· 无 position: relative;

· 有 position: relative。

代码如下图:

显示效果如下图:

 我们给 box4加入 position: relative属性.
* 如果元素加上 position: relative 属性; 元素默认为 块级元素.
* 如果未给出TRBL(top, right, bottom, left), 元素位置不变, 样式不变.
* 给出 TRBL时,是相对于 之前的位置(元素初始位置或称为元素未添加 position: relative时的位置)进行移动.
* 并且 box4被解放出来了, 不会被父元素包裹.

二、position: absolute 绝对定位

分三种情况分析:

·无 position: absolute;

·有 position: absolute;

·有 position: absolute,并给父级元素加 position: relative。

代码如下图:

浏览器显示如下图:

 第二种情况:
* 给 box4加入 position: absolute属性.
* 如果元素加上 position: assolute 属性; 元素默认 display: inline-block.
* 如果未给出TRBL(top, right, bottom, left), 元素位置不变,仅仅是变为 行内元素.
* 给出 TRBL时,是相对于 Body进行移动.
第三种情况:
* 给 box4加入 position: relative属性.
* 如果元素加上 position: relative 属性; 元素默认为 块级元素.
* 如果未给出TRBL(top, right, bottom, left), 元素位置不变, 样式不变.
* 给出 TRBL时,是相对于 之前的位置(元素初始位置或称为元素未添加 position: relative时的位置)进行移动.
* 并且 box4被解放出来了, 不会被父元素包裹.

CSS 浅析position:relative/absolute定位方式的更多相关文章

  1. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  2. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  3. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  4. 浅析position:relative position:absolute

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是: ...

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

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

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

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

  7. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  8. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. Python简要学习笔记

    1.搭建学习环境 推荐ActivePython,虽然此乃为商业产品,却是一个有自由软件版权保证的完善的Python开发环境,关键是文档以及相关模块的预设都非常齐备. ActivePython下载地址: ...

  2. Day2 Python的运算符及三大语句控制结构

    Python的运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 Python的三大语句控制结构: ...

  3. 神经网络结构在命名实体识别(NER)中的应用

    神经网络结构在命名实体识别(NER)中的应用 近年来,基于神经网络的深度学习方法在自然语言处理领域已经取得了不少进展.作为NLP领域的基础任务-命名实体识别(Named Entity Recognit ...

  4. Redis学习-SortedSet

    Sorted-Sets和Sets类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted-Sets中的每一个成员都会有一个分数(score)与之关联, ...

  5. Charles安装破解及使用

    摘要 在发开过程中,追踪请求和监控请求与返回数据是我们经常会需要的一个需求,在Mac端,Charles是一款非常易用的抓包工具. Mac端的优秀抓包工具--Charles使用 一.简介 Charles ...

  6. Mongodb密码安全设置

    先从官网下载mongo安装包(建议安装3.0之后的版本)版本选择下载链接: https://www.mongodb.org/dl/win32/x86_64-2008plus-ssl?_ga=2.210 ...

  7. 9、JcomboBox下拉框事件监听

    9.JcomboBox下拉框事件监听 JComboBox()的事件监听类ItemListener.其范例代码如下: import java.awt.*; import java.awt.event.* ...

  8. (数字IC)低功耗设计入门(三)——系统与架构级

    前面讲解了使用EDA工具(主要是power compiler)进行功耗分析的流程,这里我们将介绍在数字IC中进行低功耗设计的方法,同时也结合EDA工具(主要是Design Compiler)如何实现. ...

  9. unittest模块的常用方法:

    unittest模块的常用方法: assertEqual(a, b)     a == b assertNotEqual(a, b)     a != b assertTrue(x)     bool ...

  10. Python教程(2.2)——数据类型与变量

    和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...