HTML&CSS Day06 CSS定位布局

简介: HTML&CSS Day06 CSS定位布局

1.定位布局

- 1.1.静态定位( Static positioning)

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

position: static;

- 1.2.什么是相对定位?( Relative positioning )

相对定位就是相对于自己以前在标准流中的位置来移动

position: relative;

使用top,right,bottom,left来控制

- 相对定位注意点

  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
  • 在相对定位中同一个方向上的定位属性只能使用一个
  • 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

  • 用于对元素进行微调
  • 配合后面学习的绝对定位来使用

- 1.3.什么是绝对定位?(Absolute positioning)

绝对定位就是相对于body来定位

position: absolute;

- 绝对定位参考点

1.规律

默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。

    2.1只要是这个绝对定位元素的祖先元素都可以

    2.2指的定位流是指绝对定位/相对定位/固定定位

    2.3定位流中只有静态定位不行


3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

-绝对定位注意点

1.绝对定位的元素是脱离标准流的

2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素

3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

4.一个绝对定位的元素会忽略祖先元素的padding

- 绝对定位-子绝父相

相对定位弊端:

相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

绝对定位弊端:

默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

子绝父相

子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

只需要设置绝对定位元素的left:50%;

然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

- 1.4.固定定位(Fixed positioning)

1.什么是固定定位?

position: fixed;

固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。


注意点:

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内/块级/行内块级

- 1.5.粘滞定位( Sticky positioning )

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。


元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。


设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。


当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。


亦即如果设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上


移动(此时相当于fixed定位)。


设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件:

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一,否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

- 1.6.z-index

1.什么是z-index属性?

默认情况下所有的元素都有一个默认的z-index属性, 取值是0.

z-index属性的作用是专门用于控制定位流元素的覆盖关系的


2.默认情况下定位流的元素会盖住标准流的元素

3.默认情况下定位流的元素后面编写的会盖住前面编写的

4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点:

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。

1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。

目录
打赏
0
0
0
0
20
分享
相关文章
|
6天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
118 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
26天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
30天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
77 33
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
32 2
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
217 1
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
73 3
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
180 6
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等