1

1

1

CSS 定位 relative && absolute 问题？

谁能解释一下，为什么div使用 relative是设置right,bottom 后，看不到div 呀，哪里多出来的 top , left 属性负值呀？

（已测试了所有最新的浏览器，自动添加的top , left 属性负值）

demo:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>CSS 定位：relative &&  absolute</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        html,body{

            width: 100%;

            height: 100%;

            background: rgba(0,0,0,0.3);

            color: red;

            box-sizing: border-box;

            overflow: hidden;

        }

       .relative{

            background-color: #f0f;

            width: 100px;

            height: 100px;

            position: relative;

            right: 100px;

            bottom: 100px;

            /*

            	position: relative; 浏览器，自动补全 :

            	left == -right;

            	top == -bottom;

            */

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="relative">

            <!--comments-->

        </div>

    </div>

</body>

</html>

1.

2. chrome 中修改后，

3. 同样，设置 left,top 后， 多出来 right/bottom 的负值属性？

1

demo:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>CSS 定位：relative &&  absolute</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        html,body{

            width: 100%;

            height: 100%;

            background: rgba(0,0,0,0.3);

            color: red;

            box-sizing: border-box;

            overflow: hidden;

        }

        .box{

            width: 1000px;

            height: 600px;

            border: 1px solid red;

            /*overflow: hidden;*/

        }

        .box .relative{

            background-color: #f0f;

            width: 100px;

            height: 100px;

            position: relative;

            right: 50px;

            bottom: 50px;

            /*

            	position: relative; 浏览器，自动补全 :

            	left == -right;

            	top == -bottom;

            */

        }

        .box .relative-new{

            background-color: #0f0;

            width: 100px;

            height: 100px;

            position: relative;

            right: 0;

            bottom: 0;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="relative">

            <h3>relative</h3>

        </div>

        <div class="relative-new">

            <h3>relative-new</h3>

        </div>

    </div>

</body>

</html>

1

demo:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>CSS 定位：relative &&  absolute</title>

    <style>

    	*{

    		margin: 0;

    		padding: 0;

    	}

    	html,body{

    		width: 100%;

    		height: 100%;

    		background: rgba(0,0,0,0.3);

    		color: red;

    		box-sizing: border-box;

    		overflow: hidden;

    	}

    	.box{

    		width: 1000px;

    		height: 600px;

    		border: 1px solid red;

    		/*overflow: hidden;*/

    	}

        .box .relative{

            background-color: #0f0;

            width: 100px;

            height: 100px;

            position: relative;

            right: 100px;

            bottom: 100px;

            /*

            */

        }

        .box .relative-new{

        	background-color: #0f0;

            width: 100px;

            height: 100px;

            position: relative;

            left: 100px;

            top: 100px;

        }

        .box .absolute{

            background-color: #0f0;

            width: 100px;

            height: 100px;

            position: absolute;

            right: 100px;

            bottom: 100px;

            /*

            	position:absolute;

            	right: 200px;

            	bottom: 200px;

            	这样才好使！

            	//position:absolute; float脱离文档流

            */

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="relative">

            <h3>relative</h3>

        </div>

        <div class="relative-new">

            <h3>relative-new</h3>

        </div>

        <div class="absolute">

        	<h3>absolute</h3>

        </div>

    </div>

</body>

</html>

1

1

1

1

1

1

1

1

1

1

1

1

CSS 定位 relative && absolute 问题？的更多相关文章

  1. CSS position relative absolute fixed

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

  2. HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...

  3. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  4. css的定位，relative/absolute/fixed的用法

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

  5. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  6. CSS之定位，relative/absolute/fixed的用法

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

  7. CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  8. CSS 相对|绝对(relative/absolute)定位系列（一）

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  9. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

随机推荐

  1. 无法获取 vmci 驱动程序版本： 句柄无效。 驱动程序 vmci.sys 版本不正确。请尝试重新安装 VMware Workstation。 打开模块DevicePowerOn电源失败。

    1.别打开电源,然后到虚拟机安装文件夹内.2.找到你的虚拟机系统文件中后缀为vmx的文件,右击用记事本或者Notepad++打开.2.搜索找到vmci0.present='TRUE',字段,把true ...

  2. C#高级编程第11版 - 第二章 索引

    [1]2.1.1 Hello,World! 1. using static System.Console; // ... WriteLine("Hello World!"); 提前 ...

  3. SDNU_ACM_ICPC_2021_Winter_Practice_4th [个人赛]

    传送门 D - Odd Divisor 题意: 给你一个n,问你n是否至少有一个奇数因子(这里题意没说清,没说是不是只有一个还是可以有多个!AC以后才发现是不止一个 思路: 如果这个数没有奇数因子,那 ...

  4. E4.IO.pry/0-IO.break!/1动态打点调试

    IO.pry/0 IO.inspect只能在静态地打印指定的变量,Elixir的shell还可以使用IO.pry/0与IO.break!/1实现更灵活的调试方法. 假如你想查看一下函数的某个位置到底发 ...

  5. 获取控制台的错误信息 onerror

    js 获取控制台的错误信息 https://www.bbsmax.com/A/Vx5ML2NmJN/ <!DOCTYPE html> <html lang="en" ...

  6. dict 切片 间隔取值

    1. 字典型d[k].d.get(k),如果键名不存在 报错.返回None 2. 可以为键设置不存在情况的下的覆盖None的返回值 3. 字符串str可以看成是list 4. 对字符串的截取通过切片实 ...

  7. wireshark使用手册

    Wireshark的过滤器 使用Wireshark时最常见的问题,是当您使用默认设置时,会得到大量冗余信息,以至于很难找到自己需要的部分. 过犹不及. 这就是为什么过滤器会如此重要.它们可以帮助我们在 ...

  8. based on Greenlets (via Eventlet and Gevent) fork 孙子worker 比较 gevent不是异步 协程原理 占位符 placeholder (Future, Promise, Deferred) 循环引擎 greenlet 没有显式调度的微线程，换言之 协程

    gevent GitHub - gevent/gevent: Coroutine-based concurrency library for Python https://github.com/gev ...

  9. 关于notepad++不能设置中文的解决方法

    好久没用notepad++了,最近遇到一个base64的音频文件,想起来notepad++挺好用的 于是安装好 然后发现 最新的notepad++竟然不能显示中文界面 这怎么可以呢! 上网搜 果然 作 ...

  10. python基础（int，str，bool，list）

    1数字int. 数字主要是用于计算用的,使用方法并不是很多,就记住一种就可以:      bit_length() #bit_length() 当十进制用二进制表示时,最少使用的位数 v = 11 1 ...