0
点赞
收藏
分享

微信扫一扫

【网页前端】CSS常用布局之定位

科牛 2022-08-09 阅读 50


【网页前端】CSS常用布局之定位_css3

🔎这里是【前端网页】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【前端网页】 目前主要更新HTML,一起学习一起进步。

👀本期介绍

本期主要介绍CSS常用布局之定位

文章目录

​​1. 引言​​

​​2. 概述及分类​​

​​3. 静态定位:(标准流)​​

​​3.1 概述​​

​​4. 相对定位​​

​​4.1 概述&入门案例​​

​​4.2 边偏移​​

​​4.3 进阶案例 1:鼠标移入反馈​​

​​4.4 注意事项&总结​​

​​5. 绝对定位​​

​​5.1 概述&入门案例​​

​​5.2 进阶案例 1:父子关系中的绝对定位​​

​​5.3 进阶案例 2:子绝父相​​

​​5.4 总结​​

​​6. 固定定位​​

​​6.1 概述&入门案例​​

​​6.2 进阶案例 1:父子关系中的固定定位​​

​​6.3 总结​​

​​7. 定位总结​​

​​8. 定位-周边知识​​

​​8.1 叠放次序:z-index​​

​​8.2 定位子元素-水平垂直居中​​

1. 引言

在网页布局中,经常会涉及到将一个元素固定放置在某些位置的操作:

【网页前端】CSS常用布局之定位_html_02

或者把某些元素固定在页面某个位置,不会随着网页滚动而滚动。

【网页前端】CSS常用布局之定位_css3_03


以上效果,标准流做不到,浮动也无法轻易做到。

为了轻松实现上述效果,我们就要继续学习 CSS 常用布局的定位知识。


2. 概述及分类

定位:将元素固定在某一位置,又称为摆放元素。

作用:更加方便进行元素的位置调节

根据用法、特性的不同,定位分为多种模式

常见定位模式:

static 静态定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

下面我们来逐一学习



3. 静态定位:(标准流)

3.1 概述

静态定位:属于元素 默认 定位方式,就是我们常说的标准流。

即无定位。

语法:

选择器 {

position : static ;

}

注意:除非我们需要将元素 由其他定位模式 强制改回 标准流,否则一般情况下不用。


【网页前端】CSS常用布局之定位_html_04


4. 相对定位

4.1 概述&入门案例

相对定位: 元素以 自己原先位置 为参照进行定位。

语法:

选择器 {

position : relative ;

}

准备代码

【网页前端】CSS常用布局之定位_html_05


【网页前端】CSS常用布局之定位_html_06

【网页前端】CSS常用布局之定位_javascript_07

代码实现:

【网页前端】CSS常用布局之定位_html_08

效果分析&小结

【网页前端】CSS常用布局之定位_html_09


小结:


1 、 相对定位的元素,仍然会占用原来在 标准流 中的位置

2 相对定位可以设置边偏移会在展示效果上 覆盖标准流(也会覆盖浮动)


4.2 边偏移


边偏移:通过上下左右的偏移来移动定位元素。

作用:在定位中摆放元素

准备代码:



【网页前端】CSS常用布局之定位_css_10


【网页前端】CSS常用布局之定位_前端_11

【网页前端】CSS常用布局之定位_html_12

 常见偏移样式(标准流和浮动无法设置偏移)

【网页前端】CSS常用布局之定位_javascript_13

【网页前端】CSS常用布局之定位_css3_14


总结:


1 、 标准流和浮动无法设置边偏移

2 、 相对定位的边偏移,是 相对于 元素原先在标准流中的位置 来定位的。

4.3 进阶案例 1:鼠标移入反馈

我们可以利用边偏移 + 伪类 制造 鼠标移入反馈。

准备代码: (要求鼠标移入 三个 div ,三个 div 不影响整体布局前提下,分别有移动反馈)

(移动反馈:元素向左上移动 5px )



【网页前端】CSS常用布局之定位_css3_15


【网页前端】CSS常用布局之定位_前端_16

【网页前端】CSS常用布局之定位_javascript_17

实现代码:

【网页前端】CSS常用布局之定位_css3_18


小结:


因为相对定位能使用边偏移,用边偏移的展示效果不会影响其他元素,所以可以用来做一些效果。

4.4 注意事项&总结

1 、 标准流 (position:static;) 和 浮动 不能设置边偏移

2 、相对定位的边偏移,是 相对于 元素原先在标准流中的位置 来定位的。

3 、 相对定位的元素,仍然会占用原来在 标准流 中的位置



【网页前端】CSS常用布局之定位_css3_19


4、 相对定位会在展示效果上 覆盖标准流(也会覆盖浮动)

5. 绝对定位

5.1 概述&入门案例

绝对定位:通过设置边偏移,直接将元素放置在页面内或父元素内的某一位置。

注意:绝对定位元素,将 不占用标准流 位置

语法:

选择器 {

position : absolute ;

}


准备代码:(将为绿色 div 设置绝对定位)



【网页前端】CSS常用布局之定位_html_20


【网页前端】CSS常用布局之定位_javascript_21

【网页前端】CSS常用布局之定位_前端_22

代码实现及效果 1:

【网页前端】CSS常用布局之定位_css_23

【网页前端】CSS常用布局之定位_css_24

【网页前端】CSS常用布局之定位_html_25

代码实现及效果 2:

【网页前端】CSS常用布局之定位_css3_26

【网页前端】CSS常用布局之定位_javascript_27


小结:


1 、 绝对定位元素不占用标准流位置,不影响标准流布局(也不影响浮动)

2 、 绝对定位元素 展示效果 高于标准流(也高于浮动)

3 、 绝对定位边偏移起始位置:默认为页面左上角


【网页前端】CSS常用布局之定位_css_28

5.2 进阶案例 1:父子关系中的绝对定位

5.2.1 概念及准备代码

绝对定位在未引入父子元素时,默认的边偏移起始为:页面左上角。

父子关系中,绝对定位子元素 的边偏移起始位置为: 最近的 定位父元素的 左上角


准备代码:



【网页前端】CSS常用布局之定位_前端_29


【网页前端】CSS常用布局之定位_css_30

【网页前端】CSS常用布局之定位_css_31

5.2.2 示例 1:父元素没有定位

示例 1:父元素没有定位

【网页前端】CSS常用布局之定位_前端_32

【网页前端】CSS常用布局之定位_javascript_33

【网页前端】CSS常用布局之定位_前端_34


小结:


父元素没有定位(相对、绝对、固定),子元素边偏移从页面左上角开始

5.2.3 示例 2:父元素有定位

示例 2:父元素有定位。

【网页前端】CSS常用布局之定位_css_35

【网页前端】CSS常用布局之定位_前端_36

【网页前端】CSS常用布局之定位_css_37


小结:


父元素有定位(相对、绝对、固定),子元素边偏移 从定位父元素 左上角开始

5.2.4 示例 3:祖父和父元素都有定位

示例:祖父和父元素都有定位

【网页前端】CSS常用布局之定位_css3_38

【网页前端】CSS常用布局之定位_html_39

【网页前端】CSS常用布局之定位_前端_40


小结:


祖父和父都存在定位(相对、绝对、固定)时,子元素边偏移从 最近父元素 的左上角开始

5.2.5 进阶小结

父子关系中,绝对定位子元素 的边偏移起始位置为: 最近的 定位父元素的 左上角

5.3 进阶案例 2:子绝父相

为保持父元素在原有文档流定位,为子元素能在父元素中任意放置。

布局中有 “子绝父相” 之说。

子绝父相:子元素绝对定位,其父元素用相对定位。

准备代码:



【网页前端】CSS常用布局之定位_css3_41


【网页前端】CSS常用布局之定位_html_42

【网页前端】CSS常用布局之定位_前端_43

实现代码

【网页前端】CSS常用布局之定位_javascript_44

【网页前端】CSS常用布局之定位_前端_45

【网页前端】CSS常用布局之定位_前端_46


小结:


父子定位中,通常为了布局的便捷,我们会采取“子绝父相”的布局手法。


5.4 总结

1 、绝对定位元素不占用标准流位置,不影响标准流布局(也不影响浮动)

2 、绝对定位元素 展示效果 高于标准流(也高于浮动)

3 、父元素没有定位(相对、绝对、固定),子元素边偏移从页面左上角开始

祖父和父都存在定位(相对、绝对、固定)时,子元素边偏移从 最近父元素 的左上角开始

4 为了布局方便,更多采取: 子绝父相


6. 固定定位

6.1 概述&入门案例


固定定位:通过设置边偏移,将元素固定在页面某一位置。


注意:

1 、 固定定位和绝对定位都是脱离了标准流,不会影响标准流布局(也不影响浮动)

2 、 固定定位元素,哪怕拖动滚动条,元素位置也保持在页面不变。(绝对定位做不到)



【网页前端】CSS常用布局之定位_css3_47


语法:


选择器 {

position : fixed ;

}

准备代码



【网页前端】CSS常用布局之定位_css_48


【网页前端】CSS常用布局之定位_html_49

代码实现及效果:

【网页前端】CSS常用布局之定位_前端_50

【网页前端】CSS常用布局之定位_css3_51


小结:


固定定位不会影响标准流(也不影响浮动)布局,在页面固定,哪怕拖动滚动条也一样。

6.2 进阶案例 1:父子关系中的固定定位


固定定位的边偏移,是以页面左上角为起点,不受父元素约束


准备代码



【网页前端】CSS常用布局之定位_css_52


【网页前端】CSS常用布局之定位_css3_53

代码实现及效果

【网页前端】CSS常用布局之定位_html_54

【网页前端】CSS常用布局之定位_css_55


小结:


固定定位的边偏移,是以页面 左上角 为起点, 不受父元素约束

6.3 总结

1 、 固定定位和绝对定位都是脱离了标准流,不会影响标准流布局(也不影响浮动)

2 、 固定定位元素,哪怕拖动滚动条,元素位置也保持在页面不变。(绝对定位做不到)

3 、固定定位的边偏移,是以页面 左上角 为起点,不受父元素约束

7. 定位总结

1、定位总结:

【网页前端】CSS常用布局之定位_前端_56

2、无论何种定位,未设置边偏移的定位,都默认摆放在其标准流位置上

【网页前端】CSS常用布局之定位_前端_57


3 、边偏移和 margin 区别:


边偏移:


仅用于定位(

static 不可用,浮动不可用)


仅改变定位(相对、绝对、固定)元素的展示位置

margin

所有状态的盒子均可用

不仅改变展示位置。

若为标准流、相对定位、浮动,还会扩大其在标准流或浮动中占用的位置。



【网页前端】CSS常用布局之定位_javascript_58


8. 定位-周边知识

8.1 叠放次序:z-index

因为定位中,后来定位元素会覆盖其他定位元素,导致效果不可控

【网页前端】CSS常用布局之定位_html_59


所以为了定位展示效果的可控, CSS 提供了定位元素 - 自定义叠放次序的设置。


叠放次序:用于给定位元素设置展示效果的优先级。


注意: 1 、 优先级越高,定位元素就越不容易被其他定位元素覆盖


2 、默认的叠放次序为 auto 。可以理解为 0


格式: z-index : 整数值 ;


准备代码:



【网页前端】CSS常用布局之定位_css_60


示例代码及效果:

【网页前端】CSS常用布局之定位_html_61


小结:


1 、 通过为定位元素设置 z-index ,可以调整定位元素优先级


2 、 仅定位元素才可以设置 z-index ,标准流和浮动设置无效


8.2 定位子元素-水平垂直居中

8.2.1 引言&概念


有时我们存在需要让子元素在父元素中 水平居中的需求,若使用标准流或浮动,我们可以通过设margin:0 auto; 来解决。

但无法解决垂直居中问题,只能不断设置 margin 来解决,不但费时费事,而且无法动态改变。

所以 CSS 中,我们需要学习如何通过设置边偏移 +margin ,达到水平居中效果。



【网页前端】CSS常用布局之定位_css_62


常见的 定位子元素 - 水平居中方式:

1 、 动态居中设置

2 、 手动居中设置

8.2.2 动态居中设置

语法格式:

选择器
{

width
: 必须设置一个值;

height
: 必须设置一个值;

position
:
absolute/fixed
;

top
:
0
;

bottom
:
0
;

left
:
0
;

right
:
0
;

margin
:
auto
;
}

注意:

子元素 - 设置: 绝对 定位,子元素在 内 水平垂直居中(如果父是 body ,相当于页面水平垂直居


中)


子元素 - 设置: 固定 定位,子元素在 页面 内 水平垂直居中


适用于:快速设置子元素的水平垂直居中效果。


8.2.3 手动居中设置

语法格式:

选择器
{

width
: 必须设置一个值;

height
: 必须设置一个值;

position
:
absolute/fixed
;

top:50
%
;

left:50
%
;

margin-top:-(宽度/2-边框)
px
;

margin-left:-(高度/2-边框)
px
;

}

注意:

子元素 - 设置: 绝对 定位,子元素在 父 内 水平垂直居中(如果父是 body ,相当于页面水平垂直居中)

 子元素 - 设置: 固定 定位,子元素在 页面 内 水平垂直居中

适用于:手动自定义设置子元素的水平垂直居中效果。

建议使用:动态居中设置。


举报

相关推荐

0 条评论