前提:仅以div块为例,其它不清楚

注:1.下面截图看起来不是从页面左上角位置开始,是因为body元素有默认的margin,有边框

2.当position不是static时,top和bottom需要指定一个(不指定有默认值),left和right需要指定一个(不指定有默认值),top优先级高于bottom,left优先级高于right

  • 默认position:static,div是块类型元素,不管它有多宽,都会直接占一行。此时top,bottom,left,right属性即使设置了也不会生效

  • position:relative,相对于自己的默认位置而言的,也就是相对自己position:static时的位置

  • position:absolute,相对于自己的非postion:static的父元素(可以是祖父,祖祖父等)的位置

  • position:fixed,相对于整个浏览器



    参考博客:https://blog.csdn.net/u013848401/article/details/52422727

css里的position的static|relative|absolute|fixed的区别的更多相关文章

  1. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  2. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  3. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  4. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  5. (转)Position定位:relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  6. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  7. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  8. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  9. CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

  10. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

随机推荐

  1. 2023-03-25:若两个正整数的和为素数,则这两个正整数称之为“素数伴侣“。 给定N(偶数)个正整数中挑选出若干对,组成“素数伴侣“, 例如有4个正整数:2,5,6,13, 如果将5和6分为一组的

    2023-03-25:若两个正整数的和为素数,则这两个正整数称之为"素数伴侣". 给定N(偶数)个正整数中挑选出若干对,组成"素数伴侣", 例如有4个正整数:2 ...

  2. 2020-10-27:go中select的执行流程是什么?

    福哥答案2020-10-27: ***[2020-10-27:go中select的执行流程是什么?](https://bbs.csdn.net/topics/398044569)

  3. 2022-05-21:给定一个数组arr,长度为n, 表示n个服务员,每个人服务一个人的时间。 给定一个正数m,表示有m个人等位。 如果你是刚来的人,请问你需要等多久? 假设:m远远大于n,比如n<=

    2022-05-21:给定一个数组arr,长度为n, 表示n个服务员,每个人服务一个人的时间. 给定一个正数m,表示有m个人等位. 如果你是刚来的人,请问你需要等多久? 假设:m远远大于n,比如n&l ...

  4. 2021-08-22:定义什么是可整合数组:一个数组排完序之后,除了最左侧的数外,有arr[i] = arr[i-1]+1,则称这个数组为可整合数组,比如{5,1,2,4,3}、{6,2,3,1,5,

    2021-08-22:定义什么是可整合数组:一个数组排完序之后,除了最左侧的数外,有arr[i] = arr[i-1]+1,则称这个数组为可整合数组,比如{5,1,2,4,3}.{6,2,3,1,5, ...

  5. 在开发过程中使用git rebase还是git merge,优缺点分别是什么?

    前言 在开发过程中,git rebase 和 git merge 都是常见的代码版本管理工具.它们都能够将分支合并到主分支,并且都有各自的优缺点. git merge git merge 是一种将两个 ...

  6. ES6迭代器(Iterator)和生成器(Generator)

    平时我们迭代数据用得最多的应该就是for循环了 来看个简单的例子 var colors = ["red", "green", "blue"] ...

  7. docker部署gitlab CI/CD (二)终篇:部署gitlab runner和添加gitlab-ci.yml文件 终极踩坑版

    关于gitlab部署的教程还好,有的看,但到了cicd环节,简直痛苦面具,教程虽多,但断断续续,先不说大部分都是只截取片段,让人云里雾里,不会的看不懂,懂的不需要看,根据步骤跑不起来不说,改了一堆,完 ...

  8. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-3-离线搭建playwright环境

    1.简介 有些小伙伴或者童鞋们私信留言说自己是在公司局域网办公,或者公司为了安全对网络管控比较严格(尤其是一些大的国企.央企),总之就是一句话无法连到外网去在线下载,宏哥刚看到留言时觉得这问题还留言问 ...

  9. 无缝数据转换!使用C++ 实现 Excel文件与CSV之间的相互转换

    CSV格式是一种通用的文本文件格式,可在多个应用程序之间共享和使用.相比之下,Excel文件是一种电子表格格式,通常只能在Microsoft Excel中编辑和查看.因此,将Excel文件转换为CSV ...

  10. 关于SQL SERVER 字段类型char(n) , nchar(n) , varchar(n) , nvarchar(n)

    对于很多新手来说,经常被字段类型搞得晕头转向,今天我用通俗易懂的解释帮大家理解这些类型. 在数据库字段类型定义中,可以分为两大类,一类为Unicode类型,另一种就是非Unicode. Unicode ...