CSS：定位、静态定位、相对定位、绝对定位、子绝父相、固定定位、元素层级关系

于 2022-10-19 14:49:07 发布
阅读量159 收藏
点赞数
分类专栏： HTML5+CSS 文章标签： css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43472877/article/details/127407670
版权

文章目录

一、定位

在这里插入图片描述

1. 定位的基本介绍

在这里插入图片描述

2. 定位的基本使用

  1. 设置定位方式
  • 属性名：position
  • 常见属性值
    在这里插入图片描述
  1. 设置偏移值
    偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
    选取的原则一般是就近原则 （离哪边近用哪个）
    在这里插入图片描述
    在这里插入图片描述

3. 静态定位

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4. 相对定位

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

5. 绝对定位

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 子绝父相

在这里插入图片描述

水平居中操作

在这里插入图片描述

整体居中

在这里插入图片描述

7. 固定定位

在这里插入图片描述
在这里插入图片描述

8. 元素的层级关系

在这里插入图片描述
在这里插入图片描述

_七七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS边偏移、静态定位、相对定位、绝对定位（绝对定位的盒子居中） 、子绝父相、固定定位（固定定位小技巧-固定到版心右侧）、粘性定位、定位叠放次序 z-index、元素的显示和隐藏
m0_51796659的博客
09-24 412
CSS边偏移、静态定位、相对定位、绝对定位（绝对定位的盒子居中） 、子绝父相、固定定位（固定定位小技巧-固定到版心右侧）、粘性定位、定位叠放次序 z-index、元素的显示和隐藏
CSS定位——静态定位、绝对定位、相对定位、固定定位、粘性定位
qq_43623147的博客
12-12 1261
定位 一、为什么需要定位？ 定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。标准流或浮动都无法快速实现。 二、定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1. 定位模式 用于指定一个元素在文档中的定位方式。 通过CSS的position属性来设置，有四个值 值 语义 static 静态定位.
27.html的定位（position）和偏移量（offset）
越努力越幸运的博客
04-25 5228
文章目录定位偏移量（offset）相对定位绝对定位固定定位粘滞定位 定位 定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置 可选值： static：默认值，元素静止，没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的固定定位 sticky：开启元素的粘滞定位 偏移量（offset） 元素开启定位后，可以通过偏移量来设置元素的位置，偏移量有四个分别是 top：定位元素和定位位置上边的距离 bottom：定位元素和
定位、固定定位、层级、定位居中方法
weixin_69474097的博客
07-19 1009
定位、固定定位、层级、定位居中方法
锚点跳转偏移位置（当顶部导航设置固定定位时挡住锚点区内容时）
Miracle_Gaaral的博客
05-04 569
设置虚锚点 <a name="index" style=" position: relative;top: -90px;display: block;"></a> <div class="main-description"> <!-- 设置暗锚点 --> <a name="index" ...
CSS的相对定位，绝对定位，固定定位，及元素重叠（层级问题）
m0_49662897的博客
01-04 7525
CSS的相对定位，绝对定位，固定定位，及元素重叠（z-index层级问题）
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
YK菌的博客
12-06 2861
文章目录1. 为什么需要2. 定位组成定位 = 定位模式 + 边偏移2.1 定位模式2.2边偏移3. 静态定位 static （了解）4. 相对定位 relative （重要）5. 绝对定位 absolute （重要）6. 子绝父相的由来子级使用绝对定位，父级则需要相对定位相对定位经常用来作为绝对定位的父级因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到6. 固定定位 fixed （重要）小技巧：固定版心右侧位置7.
CSS之定位布局(position，定位布局技巧)
11-21
然而，如果设置了父元素的`position: relative`，那么这个绝对定位的子元素会相对于这个父元素定位，这大大简化了元素的布局和定位。这种技术称为“相对和绝对定位的组合”，它可以创建更加灵活和精确的布局，避免了...
IE绝对定位元素神秘消失或被遮挡的解决方法
12-04
绝对定位是CSS布局中的一个重要概念，它允许元素脱离常规文档流，并根据相对于其最近的非静态定位祖先元素进行定位。然而，当绝对定位元素与浮动元素相邻时，IE6/7可能会出现一些令人困惑的行为，导致元素消失或被...
IE7中绝对定位元素之间的遮盖问题示例探讨
09-25
在IE7中，当两个绝对定位的子元素位于具有相对定位的同一层级的父元素中时，可能会发生预期之外的遮盖情况。 问题的描述是这样的：有两个同层级的`<div>`元素，都设置了`position: relative;`，它们内部的子元素...
css-绝对定位的参考对象
03-06
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...
详解css定位与定位应用
11-25
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），每种定位方式都有其独特的特性和应用场景。 #### 静态定位（Static） - **定义**：静态定位...
css 固定定位 相对定位 绝对定位
sun_smile1的博客
05-05 430
一.固定定位 固定定位是固定在浏览器的某一视框位置。 style> div{ height: 1000px; } #back{ width: 100px; height: 60px; text-align: center; line-height: 60px; backg
面试题 position有哪些值？有什么作用？
鹏仔工作室的秘密基地
09-20 2958
static：默认值； 不脱离文档流，top，right，bottom，left等属性不生效。   绝对定位：absolute 绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件： 1.参照物和绝对定位元素必须是包含与被包含关系； 2.该参照物必须具有定位属性； 如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位。 注：设置了position...
css绝对定位分层,css定位position引发的层级关系问题详解
weixin_35118064的博客
08-03 2638
position定位里的absolute，relative和fixedabsolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。relative：相对定位，相对自己原来的位置进行定位fixed：绝对定位，相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置，不会随着滚动条滚动而变化)由posi...
position设置定位属性 absolute绝对定位 fixed固定定位 relative相对定位 sticky粘性定位 z-index设置定位元素的层叠顺序 锚点链接 透明
Lgw_zuiyouxiu的博客
07-17 767
1.position 设置定位属性 static 默认值，没有定位，静态定位，相对没有属性position属性的元素都是static定位 2.absolute 绝对定位 会使元素脱离文档流，不需要去解决 绝对定位会产生一个块级框，不管之前是何种元素，都可以设置宽高 包含块：根据距离其最近的具有定位设置的父元素进行位置的偏移， 静态定位除外，如果所有的父元...
HTML 表格table tr td、表头标题、表结构、合并单元格
热门推荐
七七的博客
03-04 1万+
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
HTML图像标签<img>和图像相对路径、绝对路径
七七的博客
03-03 7257
图像标签和路径 图像标签 在HTML标签中， 标签用于定义HTML页面中的图像。 <img src="图像URL"> 单词image的缩写,意为图像。 src是标签的必须属性,它用于指定图像文件的路径和文件名。 图像标签的其他属性: src 图片路径 必须属性 alt 文本 替换文本。图像不能显示时显示的文字。 title 文本 提示文本。鼠标放到图像上，提示的文字 wi...
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
七七的博客
03-04 5545
自定义列表(重点) 在HTML标签中，< dl>标签用于定义描述列表(或定义列表) , 该标签会与< dt> (定义项目/名字)和< dd> (描述每一个项目/名字) 一起使用。 其基本语法如下: <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2...
CSS定位基石：浮动、相对、绝对与固定详解
3. 绝对定位（absolute）：元素完全脱离了标准流，相对于最近的已定位祖先元素（如果有的话）定位，如果没有，则相对于视口定位。此模式下，元素会“脱标”，即不占用原本在文档流中的位置。使用`position: absolute...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值