CSS学习笔记:定位属性position

技术CSS学习笔记:定位属性position CSS学习笔记:定位属性position目录一、定位属性简介二、各属性值的具体功能1. relative2. absolute3. fixed三、三种定位属

CSS学习笔记:定位属性位置。

1.定位属性介绍2。每个属性值的具体功能1。相对2。绝对3。修正了三三个定位属性的效果总结。

参考:https://www.bilibili.com/video/BV18J411S7tZp=4

一、定位属性简介

属性位置用于指定元素的定位方法类型,其值为静态(默认类型)、相对、绝对和固定。当position属性的值不是静态的(即不为默认)时,我们可以添加:top、bottom、left和right属性来详细定位当前元素,我们可以使用z-index来设置层次关系。

二、各属性值的具体功能

1. relative

首先,构建一个测试框架:

分区/部门

分区/部门

分区/部门

对应的css:

div {

宽度: 200 px;

高度: 200 px;

}

#box1 {

背景技术# df637a

}

#box2 {

背景技术# 6ad281

}

#box3 {

背景: # 72d 0 F6;

}

目前的效果是:

此时,我们将#box2(绿色div)的位置值更改为相对,并为其设置顶部和左侧属性:

#box2 {

.

相对位置:

top: 200px

left: 200px

}

此时的效果是:

可以发现,当定位属性值为相对时,元素偏移量的参考点就是元素本身。此外,虽然元素已经移动到一个新的位置,元素是仍然会占有原有的位置,这就是为什么蓝色div没有安排在它上面。

2. absolute

我们的测试框架还是和上面一样,初步效果如下:

此时,打开#box2的绝对定位(绝对位置:):

#box2 {

背景技术# 6ad281

/*使用绝对定位*/

绝对位置:

}

效果如下:

您可以看到蓝色div缺失,因此请检查元素:

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

这时,我们设置相应的偏移量:

#box2 {

.

/*移动元素位置*/

top: 200px

left: 200px

}

效果如下:

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

但是,在绝对定位中,参考点并不总是浏览器的(0,0)点。首先,编写以下场景:

分区/部门

差异

差异

分区/部门

/div

/div

分区/部门

添加css:

#box2 {

宽度: 300 px;

height: 300px

背景技术# 6ad281

}

#父亲#

宽度: 200 px;

高度: 200 px;

背景-color:梅花;

}

#儿子#

宽度: 100 px;

高度: 100像素;

背景-颜色:粉色;

}

当前效果:

此时,为儿子添加绝对定位并设置一定的偏移量:

#儿子#

宽度: 100 px;

高度: 100像素;

背景-颜色:粉色;

绝对位置:

top: 100px

left: 100px

}

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

此时,为#父元素添加一个定位(静态定位除外):

#父亲#

.

相对位置:

}

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

因此,当使用绝对定位时,元素的参考点是:元素从外层寻找最近的有添加定位的父级元素

如果找到,参考点是父元素的左上角。

否则,参考点被设置为主体元素的左上角(即浏览器页面的(0,0)点)。

3. fixed

当设置为固定时,元素将固定在窗口中的某个位置,即相对于整个窗口的位置不会改变。

具体例子:

差异

Div边栏/div。

/div

#大#

高度: 2000 px;

背景-颜色:粉色;

}

#左栏{

height: 300px

宽度: 100 px;

背景-color:梅花;

位置:固定;

top: 200px

right : 0;

}

测试效果:

此时,无论你如何拖动页面,这个侧边栏仍然会保留在窗口的左侧,所以你可以使用这个定位来制作一个悬停效果。

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

定位属性值

影响

亲戚

元素的偏移参考点就是元素本身。虽然元素已经移动,但元素是仍然会占有原有的物理位置.

绝对的

元素不占用原始物理空间,偏移参考点是添加了定位的最近的父元素。

固定的;不变的

元素将固定在窗口的一个位置,即相对于整个窗口的位置不会改变。

提示:只有在带有定位的元素中添加了上、下、左、右、z-index等定位属性时,才会生效。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/67471.html

(0)

相关推荐

  • 怎么理解Impala元数据

    技术怎么理解Impala元数据本篇文章给大家分享的是有关怎么理解Impala元数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。背景Impala是一个高性能

    攻略 2021年11月23日
  • css的基本选择器有哪些

    技术css的基本选择器有哪些这篇文章主要介绍“css的基本选择器有哪些”,在日常操作中,相信很多人在css的基本选择器有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css的基本选择器

    攻略 2021年11月3日
  • 一斤是多少g,800克的东西是多少斤呢

    技术一斤是多少g,800克的东西是多少斤呢800克(g)=1.6斤。分析如下:500克等于1斤,300克等于300/500=0.6斤。所以800克等于1+0.6=1.6斤。千克是公制计量单位,一千克等于一公斤,合我国二市

    生活 2021年10月22日
  • openldap中数据库配置的示例分析

    技术openldap中数据库配置的示例分析这篇文章主要介绍openldap中数据库配置的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完![root@ldap-server ldap]# cp

    攻略 2021年11月18日
  • 个人面试小总结之一

    技术个人面试小总结之一 个人面试小总结之一基础
    值传递和引用传递的区别
    值传递:指在调用函数时将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改,那么我们的实际参数不会改变
    引用传递:指在调

    礼包 2021年12月5日
  • 古代著名书法家有哪些,我国古代著名书法家故事

    技术古代著名书法家有哪些,我国古代著名书法家故事我国古代著名书法家的故事古代著名书法家有哪些:1、王羲之:相传山阴有一位道士,想求王羲之给他写一本《黄庭经》,但又担心王羲之不肯答应。他打听到王羲之非常喜欢鹅,就特地养了一

    生活 2021年10月28日