参考资料:https://www.bilibili.com/video/BV18J411S7tZ?p=4

一、定位属性简介

position属性是用于指定一个元素的定位方法类型的属性,它的取值有:static(默认类型)、relative、absolute、fixed。当position属性的值不为static(即不为默认)时,我们可以添加:topbottomleftright属性对当前元素进行具体的定位,并且可以使用z-index来设置层级的上下关系。

二、各属性值的具体功能

1. relative

首先先搭建出测试框架:

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

对应的css:

div {
width: 200px;
height: 200px;
}
#box1 {
background: #df637a;
}
#box2 {
background: #6ad281;
}
#box3 {
background: #72d0f6;
}

当前的效果为:

此时我们将#box2(绿色div)的position值改为relative,并为其设置topleft属性:

#box2 {
...
position: relative;
top: 200px;
left: 200px;
}

此时的效果为:

可以发现,当定位属性值为relative时,元素发生偏移的参考点为该元素自身。此外虽然元素移动到了新的位置,但是元素仍然会占有原有的位置,这也是为什么蓝色div没有排到上面。

2. absolute

我们的测试框架仍与上面相同,初始的效果如下:

此时为#box2开启绝对定位(position: absolute):

#box2 {
background: #6ad281;
/*使用绝对定位*/
position: absolute;
}

效果如下:

可以发现蓝色div不见了,此时检查元素:

可以发现原来蓝色方块还在,只是放置到了绿色方块的下面。这是因为当元素启用绝对定位是,该元素就和浮动类似,不会占用原有的空间了,因此后面蓝色的方块就会排列在了红色方块的下面。

此时我们再设置对应的偏移:

#box2 {
...
/*移动元素位置*/
top: 200px;
left: 200px;
}

效果如下:

可以发现此时绿色方块偏移的参照点为浏览器的(0,0)点,也可以理解为body元素的最左上角。

但absolute定位并不是什么情况下参照点都为浏览器的(0,0)点的,先编写以下场景:

<div id="box1"></div>
<div id="box2">
<div id="father">
<div id="son"></div>
</div>
</div>
<div id="box3"></div>

添加css:

#box2 {
width: 300px;
height: 300px;
background: #6ad281;
}
#father {
width: 200px;
height: 200px;
background-color: plum;
}
#son {
width: 100px;
height: 100px;
background-color: pink;
}

当前效果:

此时为son添加absolute定位,并且设置一定的偏移量:

#son {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 100px;
left: 100px;
}

显然,它当前的参照点还是浏览器页面的(0,0)点。

此时为#father元素也添加一个定位(除了static的定位都可以):

#father {
...
position: relative;
}

此时可以发现#son元素的参考点变成#father元素了。

因此,当使用absolute定位时,元素的参考点为:该元素向外层寻找最近的有添加定位的父级元素

  1. 找到了则参考点为该父级元素的左上角
  2. 否则参考点设置为body元素的左上角(即浏览器页面的(0,0)点)。

3. fixed

当设置了fixed后元素将固定在窗口的一个位置,即相对整个窗口的位置不再发生变化。

具体例子:

<div id="big">
<div id="left-bar">侧边条</div>
</div>
#big {
height: 2000px;
background-color: pink;
}
#left-bar {
height: 300px;
width: 100px;
background-color: plum; position: fixed;
top: 200px;
right: 0;
}

测试效果:

此时无论如何拖动页面,这个侧边条依然会保持在窗口的左边不动,因此使用这个定位可以制作悬停效果。

三、三种定位属性的效果总结

定位属性值 效果
relative 元素发生偏移的参考点为该元素自身,虽然元素发生了移动,但是元素仍然会占有原有的物理位置
absolute 元素不会占用原有的物理空间,且偏移参考点为最近的有添加定位的父级元素
fixed 元素将固定在窗口的一个位置,即相对整个窗口的位置不再发生变化

tips:只有添加了定位的元素中添加top、bottom、left、right和z-index这些定位属性才会生效。

CSS学习笔记:定位属性position的更多相关文章

  1. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  2. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  3. CSS学习笔记-背景属性

    一.背景尺寸属性:    1.含义:        背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式:        1.1具体像素:             backgro ...

  4. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  5. Html CSS学习(五)position定位 原

    Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...

  6. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  10. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

随机推荐

  1. ubuntu系统安装docker

    系统版本:Ubuntu 18.04 # 更新apt update # 安装依赖apt install apt-transport-https ca-certificates curl software ...

  2. c++ 的学习笔记 第一集cim cout

    1. 你要用这个东西,所以得有包含它得头文件,就像java 你要用某个模块,你得包含这个模块 模块化??单片机里面学的模块化(可以在vs里面实现) 2. 当我把注册表regedit 程序删除之后成功了 ...

  3. k8s负载资源StatefulSet工作解析

    在k8s中工作负载资源StatefulSet用于管理有状态应用. 什么是无状态? 组成一个应用的pod是对等的,它们之前没有关联和依赖关系,不依赖外部存储. 即我们上篇小作文中deployment创建 ...

  4. bug 找不到或无法加载主类main.java.*

    开发时遇到的的一个问题,不知道是什么引起的,一个maven springboot 的项目,主类启动的时候报错,说没找到 主类,起先怀疑是springboot的问题,随手写一个单独的类,有main方法, ...

  5. Notepad++离线安装使用Markdown插件

    1.介绍 MarkdownViewerPlusPlus是Notepad++的Markdown插件, 这个Markdown插件可以在Notepad++中实时动态渲染, 可以同步查看使用Markdown的 ...

  6. Interrupted Exception异常可能没你想的那么简单!

    摘要: 当我们在调用Java对象的wait()方法或者线程的sleep()方法时,需要捕获并处理InterruptedException异常.如果我们对InterruptedException异常处理 ...

  7. CF280C Game on tree(期望dp)

    这道题算是真正意义上人生第一道期望的题? 题目大意: 给定一个n个点的,以1号点为根的树,每一次可以将一个点和它的子树全部染黑,求染黑所有点的期望 QwQ说实话,我对期望这种东西,一点也不理解... ...

  8. 详解build-gradle文件

    目录 gradle 两个build.gradle文件 最外层目录下的build.gradle文件 jcenter dependencies闭包 app目录下的build.gradle文件 com.an ...

  9. Java(6)流程控制语句中分支结构if与switch

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201528.html 博客主页:https://www.cnblogs.com/testero ...

  10. JavaScript之原型与原型链

    前言 ❝ JavaScript常被描述为一种「基于原型的语言」--每个对象都拥有一个「原型对象」,对象以其原型为模板.从原型继承属性和放法.原型对象也可能拥有原型,并从中继承属性和方法,一层一层以此类 ...