css中position属性的static,relative,absolute,fixed简要说明

最新推荐文章于 2021-11-05 10:10:42 发布
最新推荐文章于 2021-11-05 10:10:42 发布
阅读量376 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013589542/article/details/54600055
版权
  1. static

    • HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

  2. relative

    • 相对定位元素的定位是相对其正常位置。

      h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

      相对定位元素经常被用来作为绝对定位元素的容器块。

    • Absolutely定位使元素的位置与文档流无关，因此不占据空间。

      Absolutely定位的元素和其他元素重叠。


  3. absolute
    • 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
      h2
{
position:absolute;
left:100px;
top:150px;
}

      重叠的元素

      元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

      z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

      一个元素可以有正数或负数的堆叠顺序：


  4. fixed
    • 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
      p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

      Fixed定位使元素的位置与文档流无关，因此不占据空间。

      Fixed定位的元素和其他元素重叠。




风_2015
关注
专栏目录
CSS盒子模型及定位属性（position)
Chico_D的博客
06-01 893
CSS盒子模型之定位属性（position) #CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： emmm…把它想象成一幅画可能好理解一点，画框和画。 不同部分的说明： • Margin(外边距) - 清除边框外的区域
CSS——position定位 static、relative、absolute、fixed、sticky
LT的博客
06-02 582
position定位 我们常常需要使用定位模型达到布局的目的。 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 接下来介绍position的五种定位模型。 一、static自然模型 .box{ position:static; } static——静态定位、常规定位、自然定位；默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, rig
HTML之position:absolute relative static fixed的区别和理解
AI吃大瓜的博客
02-24 8199
HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时，我们先需要清楚什么是文档流。 一、文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下,
CSS中Position属性四个值：static、fixed、absolute和relative的区别和用法
majunzhu的博客
03-30 628
转：https://www.cnblogs.com/theWayToAce/p/5264436.html先看下各个属性值的定义：1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。2、relative（相对定位）：生成相对定位的元素，通过margin中margin-top,margin-bott...
绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
印第安米饭
06-23 4万+
我一直很困惑绝对定位后父盒子的高度会变为0，如何让绝对定位的元素撑开父盒子呢？ 我在StackOverflow上找到的高分解决方案如下： Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions...
什么是css绝对定位与相对定位,CSS相对定位与绝对定位
weixin_39664136的博客
08-04 1114
1.相对定位Position : relative ;特点：1 如果没有定位偏移量，对元素本身没有任何影响；2 不使元素脱离文档流，空间是会被保留；3 不影响其他元素布局；4 left、top、right、bottom是相对于当前元素自身进行偏移的。代码：初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非...
css position:
最新发布
04-26
- absolute：元素脱离正常文档流，相对于父元素（如果有）或文档的最近定位祖先元素（即position属性值不为static的祖先元素）进行定位。 - fixed：元素脱离正常文档流，相对于浏览器窗口进行定位，即保持在屏幕上...
详解css的四种定位方式
pumpkin_truck的博客
11-14 1087
详解四种定位方式 所谓定位，既是指手动控制元素在包含块中的精确位置。 定位（position）=定位模式+边偏移。 边偏移：定义元素相对于父级上线的位置。 top botton left right 定位模式：选择器{position：属性值；} 1、 静态定位（static） static定位，也叫静态定位，是元素默认的定位方式，它遵循正常的文档流，占用文档空间，该定 位方式下，top、right、bottom、left、z-index等属性是无效的。 <style> .
CSS样式表中文手册
02-06
2. **定位**: 使用`position`属性（static, relative, absolute, fixed）来控制元素的定位方式。 3. **流体布局**: 使用百分比宽度和`flexbox`或`grid`布局适应不同屏幕尺寸，实现响应式设计。 **选择器进阶** 1. *...
css教程制作八卦镜代码分享
09-25
1. **Positioning（定位）**：CSS提供了多种定位方式，包括static、relative、absolute和fixed。其中，absolute定位是相对于最近的非static定位祖先元素进行定位。 2. **Transformations（转换）**：transform属性...
position属性的absolute和relative的理解
qq_56674629的博客
05-14 754
概述： 每个定位的意义：相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。 主要： （其实对于定位的理解，主要问题是要记住每个定位的意义。） absolute（绝对定位）以窗口做为定位 relative以自身的占位为基线做偏移！ 如果想absolute（绝对定位）能以父层做为定位基线的话， 则在父层应用absolute或relativ属性就可以! 3.eg： <div id=posi style=”position：relative”>
谢谢云麓谷的培养
Funooo的博客
11-04 343
前端考核之际 经过了一个多月的学习 我终于来到了这一天 前端考核 我在考核中复习了有关left top bottom的css用法 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 注释：如果 “position” 属性的值为 “static”，那么设置 “left” 属性不会产生任何效果。 top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外...
CSS 相对定位和绝对定位
Amy_cloud的博客
06-29 1035
通常情况下，元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中， 这个时候给这个元素设置的left,right,bottom,top偏移量以及z-index属性都是没有作用的。 relative 相对定位 如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元...
专题 | position专题
A123ppleQueen的博客
11-05 230
position有5个值 static static
position：absolute绝对位置的正确使用
weixin_43732080的博客
04-02 5460
position：absolute设置的元素 其绝对位置相对的元素是它最近的一个父级元素 同时，该父级元素必须满足position的值是relative、absolute、fixed 偏移值由此元素的top、buttom、left、right确定 若绝对定位的元素超出其父元素的边界，想隐藏超出的部分，在其父元素里需设置overflow：hidden；position：relat...
position定位的属性
feixiang的博客
08-25 866
1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。 3、position: absolute absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
css:position属性
VitaLemon__的专栏
01-07 1196
在CSS中，left、right、top、bottom表示距离左右上下的值，它们其实是有一个“参照物”的。要想让这4个属性发挥作用，必须给position属性设置（非static的）值。position属性，有以下取值： static：默认值，表示没有定位（没有参照物。所以left等值设置了也没用） inherit：继承父元素的值 relative：相对定位，表示相对于“本来所在的位置” absol
position（absolute）绝对定位
归尘
08-10 1700
position（absolute）绝对定位 脱离文档流 参照点为：距离当前元素最近的父定位元素，若所有父元素都没有定位元素，就参照游览器视口 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>absolute</title> ...
position:absolute详解
热门推荐
xiaobing_hope的专栏
12-13 11万+
position：absolute日常开发中经常涉及元素的定位，我们都知道，绝对定位相对于最近position不为static的父级元素来定位，但其中定位的位置还是有细微的差别的。绝对定位根据left和top属性来规定绝对定位元素的位置。 但这个位置实际上与padding和父级相对定位的box-sizing有关的。* 默认盒子的box-sizing为content-box（即盒子所占据的宽度=wi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值