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

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

5. 绝对定位


5.1 概述&入门案例


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

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

语法:

选择器{

position: absolute;

}

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

image.png

image.png

 代码实现及效果 1

image.png

image.png

 代码实现及效果 2

image.png

image.png

小结:

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

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

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

image.png

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


5.2.1 概念及准备代码


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

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

准备代码:

image.png

image.png

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


示例 1:父元素没有定位

image.png

image.png

小结:

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

5.2.3 示例 2:父元素有定位


示例 2:父元素有定位。

image.png

image.png

image.png

小结:

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

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


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

image.png

image.png

小结:

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

5.2.5 进阶小结


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

5.3 进阶案例 2:子绝父相


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

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

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

准备代码:

image.png

image.png

image.png

image.png

小结:

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

5.4 总结


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

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

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

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

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

相关文章
|
2月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
3月前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
195 4
|
3月前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
109 30
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
|
3月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
3月前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
58 3
|
3月前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
3月前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
52 5
|
3月前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
389 4

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    docker安装nginx,前端项目运行
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    详解智能编码在前端研发的创新应用
  • 7
    巧用通义灵码,提升前端研发效率
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程