CSS定位（position）知识详解

最新推荐文章于 2024-08-03 16:11:42 发布
最新推荐文章于 2024-08-03 16:11:42 发布
阅读量154 收藏
点赞数
分类专栏： CSS 文章标签： css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhw19960418/article/details/107177961
版权

1、定位详解

在这里插入图片描述

1.1边偏移

在这里插入图片描述

1.2定位模式

在这里插入图片描述

1.2.1静态定位（了解）

在这里插入图片描述

1.2.2相对定位(relative)-重要

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

1.2.3绝对定位(absolute)-重要

在这里插入图片描述

1.2.4固定定位（fixed）-重要

在这里插入图片描述

2、定位拓展

2.1绝对定位的盒子居中

在这里插入图片描述

2.2堆叠顺序（z-index）

在这里插入图片描述

2.3定位改变display属性

在这里插入图片描述

3、定位总结

在这里插入图片描述

4、网页布局总结

在这里插入图片描述

零可
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中的元素定位（Position）
WhiteCrowZHZ
06-18 493
position是什么？有什么作用？ Position Layout Module: 提供与元素定位和层叠相关功能，他是核心模块 盒子模型的类型和尺寸 布局模型 元素之间的关系 视口大小、图像大小等其他相关方面 作为position属性 position: static 自然模型/常规定位/自然地位 作用： 使元素定位于常规/自然流中 特点： 忽略t...
CSS中的定位(position)详解
weixin_52079958的博客
07-29 2428
将学过的定位进行一个简单的整理，方便以后查阅，也想向大家分享一下。 众所周知，定位分为5种，分别为：静态定位、相对定位、绝对定位、固定定位、粘性定位。下面我为大家详细介绍一下每种定位。 1.静态定位(static)： 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。 静态定位 按照标准流特性摆放位置，它没有边偏移。 静态定位在布局时我们几乎不用的 图片解释： 2.相对定位(relative)： 相...
css中元素的定位
weixin_46544600的博客
03-26 2054
定位 概述: 定位就是手动控制元素在包含块中的精准位置 一个元素只要position的取值不是static,就可以认为该元素是个定位元素 定位元素会脱离文档流(相对定位除外) 涉及的css属性:position position属性 默认值: static 静态定位(不定位) relative: 相对定位 absolute: 决定定位 fixed: 固定定位 脱离了文档流的元素: 文档流中...
CSS的定位（绝对定位 相对定位 固定定位）
九宫霓虹
02-15 2769
CSS position 属性 这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对(absolute)或固定(fixed)元素会生成一个块级框，而不论该元素本身是什么类型。 相对(relative)定位元素会相对于它在正常流中的默认位置偏移。 默认值： static 继承性： no 版本： CSS2 JavaScript 语法： object.style.
CSS中的四种定位方式详细整理（position）
surymy
12-31 1620
目录 一、position的可选值 二、相对定位：`position:relative` 三、绝对定位：`positon:absulote` 三、固定定位：`position:fixed` 四、粘滞定位：`position:sticky`
css position 设置元素的定位方式详解
09-24
CSS中的`position`属性是网页布局的关键特性，用于设置元素的定位方式，让开发者能够精确控制元素在页面上的位置。本文将深入解析`position`属性的四种主要取值：`static`、`relative`、`absolute`和`fixed`，以及...
css定位position引发的层级关系问题详解
01-21
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left...首先我们要知道，css属性其实是一个立体空间有x，y，z轴，但是只有我们使用了position定位时，z轴上的层级关系才体现出来，即z-in
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
CSS的定位（绝对定位 相对定位 固定定位
极客on之路
02-19 888
CSS position 属性 这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对(absolute)或固定(fixed)元素会生成一个块级框，而不论该元素本身是什么类型。 相对(relative)定位元素会相对于它在正常流中的默认位置偏移。 默认值： static 继承性： no 版本： CSS2 JavaScript 语法：
css中常见的定位方式
qq_45451382的博客
11-23 762
CSS的四种定位方式（position） 静态定位（默认） static 相对定位 relative 绝对定位 absolute 固定定位 fixed 1. 静态定位（默认） position: static; 2. 相对定位 position: relative; “相对定位”, 相对的是它原来在文档流中的位置（或者默认位置）. 相对定位下，可以利用 top 和 left 属性相对于元素...
简单介绍css中4种常用的定位（position）方法
Romu_lus的博客
02-23 1128
css中一般使用属性position结合left（左）、right（右）、top（上）、bottom（下）定位 position常用的属性值共有4个：static、absolute、relative、fixed。
CSS——玩转Position
m0_59744830的博客
04-19 1256
玩转Position，随心所欲置于页面任意角落
016day（考试题）
w296932099的博客
07-31 3650
1.以下哪个不是定位属性的属性值? A.static【默认定位】 B.absolute【绝对定位】 C.fixed【固定定位】 D.visibility 2.不属于form标签的属性的是? A.name B.method【提交方式】 C.get【method的属性值】 D.action【后台的路径】 3.img标签中不包含的属性有? A.alt【图片走走丢之后的提示】 B.title【鼠标悬停显示的内容】 C.url D.src【图片的路径】 4.以下属性...
css面试题整理 简书
lms1231的博客
07-11 377
1.display:none与visibility：hidden的区别？ display：none不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden隐藏对应元素，在文档布局中仍保留原来的空间（重绘） 2.position跟display、overflow、float这些特性相互叠加后会怎么样？ display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。 类似于优先级...
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3197
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型。取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative relativ
CSS中position属性( absolute | relative | static | fixed )详解
热门推荐
雾里看花
04-07 9万+
我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，b
css中使用data中的变量
最新发布
weixin_45580774的博客
08-03 322
一、定义变量 data() { return { myColor:"#2a9efb", }; }, 二、在templete中激活 <template> <div class="chat-message" :style="{'--myColor':myColor}"> 你好 </div> </template> 三、在css中使用 .chat-message { background: var(--myColor);
CSS学习 - 选择器
Aaron121314的博客
08-03 785
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。以上是基本选择器的用法，可以用来实现各种样式，但是为了使用简便和优化，还要学习一些进阶的选择器。的属性的元素，其值的字符串中的任何地方，至少出现了一次。
CSS position属性详解：布局与定位控制
CSS的`position`属性是网页布局和设计中不可或缺的一部分，它控制着元素在页面上的定位方式。这个属性主要有四个值：`static`, `relative`, `absolute`, 和 `fixed`，其中`static`是默认值，表示元素按照文档流自然...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值