CSS的定位属性

最新推荐文章于 2024-03-30 14:41:35 发布
最新推荐文章于 2024-03-30 14:41:35 发布
阅读量391 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41420688/article/details/89849121
版权
CSS定位属性： position
相对定位：针对原来位置的位置的移动方式：relative

绝对定位：针对父元素的位置进行移动的：absolute
固定定位：在当前浏览器的位置不会随着滚动条的变化而变化：fixed

在下图的基础上进行定位操作：

在这里插入图片描述

在这里插入图片描述

1. 绝对定位：针对父元素的位置进行移动的：absolute

在这里插入图片描述

在这里插入图片描述

2.相对定位：针对原来位置的位置的移动方式：relative

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

3.固定定位：在当前浏览器的位置不会随着滚动条的变化而变化：fixed

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

main--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位属性介绍
chencyxcyx的博客
03-01 3307
定位属性为position，常用的属性值有static，relative,absolute,fixed，sticky。 static：代表默认值，没有定位，也可以用来取消之前设置的定位值。 relative：相对定位，它的参照物是自己本身，可以通过left、top、right、bottom设置偏移值。它并没有脱离文档流，所以原来所占的位置依然会保留。相对定位并不会影响其他元素的布局。 absol...
CSS属性之定位
qq_41583484的博客
02-23 933
CSS属性之定位 定位（position）作为CSS中使用频率较高的几大类属性之一，在页面布局，排版，页面功能化方面起着不可或缺的作用，其作为CSS基础中的一个较难点，成为了很多前端入门者学习的困扰，接下来我们来聊聊CSS中定位的那些事。 顾名思义，浮动强调悬浮，定位强调位置，定位的关键点在于其位置以及参照物的选取。 定位有以下几种常用属性：relative（相对），absolute（绝对），fi...
【CSS定位属性】用CSS定位属性精确控制你的网页布局！
最新发布
云端源想的博客
03-30 1029
CSS定位属性是用于控制网页中元素位置的一种方式，它能够让元素在页面上精准地落在我们想要的位置。在CSS中，定位（Positioning）是控制元素在页面上如何定位和显示的一种机制。它主要包括四种属性：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。每种定位方式都有其独特的特点和使用场景，下面将分别介绍这几种定位属性。
css之定位属性（相对、绝对、固定、粘性）
qq_53165476的博客
06-04 4109
2）可以使用 left、right、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值.5）粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。都发生定位的两个元素，后写的元素会盖在先写的元素之上。5）无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素.5）无论是什么元素(行内、行内块、块级) 设置为固定定位之后，都变成了定位元素。1，定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
CSS 常用样式——定位属性类型及特点
猿码互联
10-13 1572
相对定位是 CSS 中的一种定位方式，它允许我们将一个元素相对于其原始位置进行定位，而不会影响其它元素的位置和尺寸。相对定位是通过属性实现的。相对定位常用于创建位置相对于父元素的元素，以及重叠元素。我们可以使用topbottomleftright属性调整元素的位置。在上面的代码中，我们创建了一个容器元素.container和一个相对定位的元素.box。我们使用left和top属性将.box元素相对于其原始位置向右和向下移动了 50 像素。相对定位还有一个很重要的特性：它不会改变页面布局结构。
position定位的属性值
m0_62198921的博客
01-07 1791
posititon定位属性都有：static 、relative、absolute、fixed 、inherit和 sticky,这里sticky是CSS3新发布的一个属性。 1、position：static static(清除定位)是position的默认值，有时候给元素设置固定定位，可以使用position：static去掉 2、 position ：relative relative(相对定位),不影响元素本身的特性，不会使元素脱离文档流，相对于本身原本位置进行偏移 3、position：abs.
CSS教程 CSS定位属性
09-25
CSS定位属性是网页布局设计的关键，它允许开发者精确控制元素在页面上的位置，从而实现复杂的网页布局。在CSS中，有三种主要的定位机制：普通流、浮动和绝对定位。 普通流是元素默认的布局方式，块级元素从上到下...
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
采用CSS定位属性实现Html中DIV层叠与悬浮
09-25
DIV没有悬浮一说，更准确的应为层叠或者固定，下面为大家介绍的是通过CSS定位属性来实现这一效果
CSS属性
01-20
一、 CSS定位区别 static:默认值，设置坐标无效 absolute：绝对定位（参考浏览器，html)； 特征： 1. 脱离文档流，不占位置 2. 默认参考浏览器零点 3. margin+left/top relative：相对定位 特征： 1. 占据文档流，占...
定位属性
weixin_43632580的博客
03-01 1381
1.CSS 有三种基本的定位机制：普通流、浮动流、定位流。 普通：上下排列的布局（注：大部分情况） 浮动：左右排列的布局（注：大部分情况） 定位：层叠（叠加）排列的布局 （注：大部分情况） 2.定位属性：position ：检索或设置对象的定位方式。 (1)static：默认值；没有定位；（可以用于取消元素之前的定位设置） (2)relative：相对定位 （参照物：自己所在的位置） 特点：如果...
浅谈css中的定位属性
musyou的博客
03-01 254
声明：本人学识有限，个人理解所写，文中如有错误或不当之处，请各路大神指出，谢谢！ 浅谈css中的定位属性 1、普通流定位 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 如div、h1、h2、h3…p、ul等标签 页面中的行内元素：按照从左到右的方式逐个排列 如a、b、c、d等标签 但是如何让多个块级元素在一行内显示? 2、浮动定位 利用flo...
定位属性position，相对定位，绝对定位
yshusencsdn的博客
08-02 1535
定位 position: 1:定位类型: 静态定位 static 标准流下的默认值 一动不动 相对定位 relative 绝对定位 absolute 固定定位 fixed 2:定位方位值: left:当前定位元素距离父元素左侧边界的值 top:当前定位元素距离父元素上侧边界的值 bottom:当前定位元素距离父元素下侧边界的值 right: 当前定位元素距离父元素右侧边界的值 相对定位 ...
CSS类名及常用属性总结
weixin_46628546的博客
07-14 4136
CSS常用类和属性总结CSS常用类总结页面结构div+css命名导航功能样式文件命名CSS常用属性总结字体设置文本属性盒子设置其它常用属性 CSS常用类总结 页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center div+css命名 wrapper 页面外围控制整体布局宽度 con
CSS中的定位属性position的用法
huhaha24的博客
04-30 2172
position属性是CSS中比较重要也比较难以理解的属性，下面我就来谈谈我自己的理解吧！position属性的取值有：1.static（默认值，块级元素和内联元素按照正常的方式进行排列）2.relative（相对定位）  relative相对定位是指相对自己原来的位置定位，而且它不会脱离正常的文档流，也就是还是会占据网页中的位置当设置left和top时，元素会以窗口的左上角为原点，设置left就...
常用的CSS属性列表汇总
薄年再无木小白的专栏
01-19 1878
常用的CSS属性列表汇总 　　近期教学给学员总结常用的CSS属性，方便学习查询，正好发上来也给大家分享一下。 　　表格最右列的数字标识支持的CSS最低版本。   　　01. CSS背景属性(Background)     属性与描述 　　background：在一个声明中设置所有的背景插件1 　　background-attachment：
CSS中的定位属性
09-10 572
CSS中定位的所有属性 bottom 属性 说明 值 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移 auto length inherit clip 剪辑一个绝对定位的元素 shape auto inherit cursor ...
关于CSS中的定位属性
love__we的博客
01-20 1106
定位属性分为五类：普通流定位、浮动定位、相对定位、绝对定位、固定定位。 普通流定位就是在不加其他定位的情况下，html文档自己的排版效果。 浮动定位需要使用float属性，取值为left和right。 相对定位、绝对定位和固定定位是使用的position属性来对指定元素进行定位。取值为relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。 浮动是相对于父元素来进行浮动，float:left是指靠在父元素的左边，同理，float:right是指靠在父元素的右边。 &l.
css位置属性简介
l1936441554的博客
08-10 736
css位置属性 css位置属性的语法是：position：xxx 定位可以分为1.position：static（静态位置属性）2.position：relative（相对定位）3.position：abosult（绝对定位）4.position：fixed（固定定位）。以上就是position属性的四个值，下面我们来具体的介绍一下这四个值的特点： 一·position：static（静态位置属性...
css定位如何添加多级属性
05-28
在 CSS 中，可以使用空格来表示多级属性的嵌套关系。例如，如果要设置一个 `div` 元素中的 `p` 元素的字体大小为 `14px`，可以使用以下 CSS 规则： ```css div p { font-size: 14px; } ``` 这里的 `div p` 表示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值