css之position

最新推荐文章于 2023-11-21 17:38:00 发布
原创 最新推荐文章于 2023-11-21 17:38:00 发布 · 430 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

前言

position是最常用的属性之一，所以务必将它的每个值都搞明白。本文是个人理解position的总结。

可能的值

  • static(default)
    • 静态的，默认的位置
    • 忽略left、right、top、bottom
  • relative
    • 相对的位置，相对默认(static)位置偏移
    • 仍然占据原来的位置，也可以说占据着文档流
    • 举例
      • 注意后边的div并没有上移占据空出来的空间，这是因为relative的div仍然占据原来的空间
      • 这里写图片描述
  • absolute
    • 相对第一个非static的父元素的便宜，如果无此元素则相对body
    • 不再占据原先的位置，也就是脱离文档流
    • 举例
      • 注意后边的div上移占据了空出来的空间，这是因为absolute的div脱离文档流，不再占据原来的空间
      • 这里写图片描述
  • fixed
    • 相对窗口
    • 脱离文档流，不再占据原先的位置
    • 举例
      • 这里写图片描述

完整demo

在线demo

CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
CSS之定位布局（position，定位布局技巧）
weixin_30867015的博客
05-08 204
css之定位 本人博客：查看文章 1.什么是定位： css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述： static(静态)没有特别的设定，遵...
css position
m0_37646522的博客
03-28 178
static：默认值，没有定位，元素出现在正常的流中absolute：绝对定位，相对于static定位以外的第一个父元素定位relative：相对定位，相对于正常位置定位fixed：固定定位，相对于浏览器窗口的定位...
CSS position
Litwak
06-08 194
说明
【css基础】定位（position）
coder
11-21 282
static（静态定位）对象遵循标准文档流，top，right，bottom，left 等属性失效。relative（相对定位）对象遵循标准文档流，使用 top，right，bottom，left 等属性相对于该对象在标准文档流中的位置进行偏移（相对于元素的正常位置进行定位），同时可通过 z-index 定义层叠关系。absolute（绝对定位）对象脱离标准文档流，使用 top，right，bottom，left 等属性进行绝对定位（相对于 static 定位以外的第一个父元素进行绝对定位。
CSS之Position全面认识
12-12
CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及...
CSS之Position详解
07-19
### CSS之Position详解 在CSS布局中，`position`属性起着至关重要的作用。它用于定义元素如何在页面上定位，决定了元素是否会被其他元素所影响，或者它是否会覆盖其他元素。`position`属性共有四种取值：`relative`...
CSS中position属性之fixed实现div居中
09-03
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。`position`属性有多个值，如`static`、`relative`、`absolute`和`fixed`，每种都有其特定的用途。在这个场景中，我们主要关注的是...
css中position:fixed实现div居中上下左右居中
09-25
与之相对的是position:absolute，它会将元素定位在最近的已定位祖先元素中，如果没有则相对于初始包含块（通常是视口）。 要实现DIV的完全居中，需要结合使用position:fixed以及通过调整left、top、right、bottom...
php position设置,html 之 position用法
weixin_39855568的博客
03-09 210
在此，先做声明，本篇仅是摘录自互联网，个人认为这篇文章讲的很不错，附于此地与大家共同欣赏。position的四个属性值：1.relative2.absolute3.fixed4.static下面分别讲述这四个属性。sub1sub21. relativerelative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定...
html absolute溢出,position:absolute溢出处理
weixin_35901475的博客
06-04 2450
今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了，溢出的部分依然溢出。百度后，才想起来... ...position后，元素已经和父元素不在一个流里面了，而overflow只能对在同一流中的元素起作用。简单说，就是 table 已经是移民火星了，而table外面的div 依然还在地球，那么身在地球的div自然是管不了身在火星的table咯。...
绝对定位的元素怎么才能保留在文档中的位置
weixin_35752233的博客
01-16 405
使用 CSS 的 "position: absolute" 属性可以将元素定位为绝对位置。如果希望该元素保留在文档中的位置，需要将它的父元素设置为 "position: relative"。这样，绝对定位的元素将相对于其父元素进行定位，而不是相对于整个文档。 ...
CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）
热门推荐
我不是水哥
12-10 2万+
在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工...
CSS position详解
前端小白
08-26 2108
1.首先必须说明的，是浏览器渲染DOM的原理。浏览器根据html中的顺序依次渲染，对文字图片等进行分块，一个块接一个块渲染。 2.接下来，要说明的是，可以设置块的大小。 3.然后看一下position， position属性有四个值，static、relative、absolute、fixed。         A.static：这个值表示默认，让浏览器按照没有positio
CSS position中 绝对定位和相对定位的区别以及占位问题
08-01 7428
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS中的盒子模型</title> <style> body { margin: 0; } .d1 { width: 300px; heigh...
css的position属性
一个半路出家的人
08-11 1万+
Html css position属性   position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中. 1,第一个属性absolute,绝对定位 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 &lt;!DOCTYPE html&gt; &...
css中position的详细介绍
菜鸟腾飞
08-26 1383
在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示 CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。◆position:static　无定位该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用po
css 的position
最新发布
03-10
### CSS `position` 属性使用指南 #### 静态定位 (Static) 默认情况下，HTML 元素都是静态定位。这意味着它们按照正常的文档流进行排列，不会受到诸如 `top`, `bottom`, `left`, 和 `right` 这样的偏移属性的影响[^1]。 ```css div { position: static; } ``` #### 相对定位 (Relative) 当元素被设定为相对定位时，它仍然占据原来的空间，但是可以通过指定 `top`, `bottom`, `left`, 或 `right` 来调整其相对于原始位置的位置。这种类型的定位对于微调元素非常有用[^2]。 ```css div { position: relative; top: 10px; left: 20px; } ``` #### 绝对定位 (Absolute) 绝对定位使元素脱离正常文档流，并允许基于最近已定位祖先元素来放置该元素；如果没有这样的父级，则参照初始包含块（通常是视口）。这使得绝对定位非常适合创建覆盖层或其他不遵循常规布局结构的内容。 ```css div { position: absolute; top: 50%; transform: translateY(-50%); } ``` #### 固定定位 (Fixed) 具有固定定位的元素会相对于浏览器窗口本身而不是任何特定容器来进行定位。即使页面滚动，这类元素也会保持在同一视觉位置上显示。这对于实现导航栏或者返回顶部按钮等功能特别有效。 ```css nav { position: fixed; bottom: 0; width: 100%; } ``` #### 粘性定位 (Sticky) 粘性定位是一种混合模式，在某些条件下表现为相对定位而在其他时候则像固定定位一样工作。通常用于列表项或表格头部等需要在用户浏览到一定高度之后才固定的场景下。 ```css header { position: sticky; top: 0; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值