CSS+DIV定位分析(relative,absolute,static,fixed)_divstatic(1)

3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:

2、实例讲解

1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:

这里写图片描述

黄色背景的层定位为relative,红色边框区域为其在正常流中的位置(没有定位前的正常位置)。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是*其在正常流中的位置不在存在。*如图2:

这里写图片描述

可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上(其他的元素会占据其地盘)。占据了其位置,黄色背景漂离与文档之外。

3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于自身原来的位置relative,在原来的位置上发生偏移。如图3:

这里写图片描述

图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对自身的位置发生了偏离,分别为top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

这里写图片描述

可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

最后

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

  • HTML5新特性,语义化

  • 浏览器的标准模式和怪异模式

  • xhtml和html的区别

  • 使用data-的好处

  • meta标签

  • canvas

  • HTML废弃的标签

  • IE6 bug,和一些定位写法

  • css js放置位置和原因

  • 什么是渐进式渲染

  • html模板语言

  • meta viewport原理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值