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. python生成器 递归

    生成器 生成器:只要函数体内出现yield关键字,那么再执行函数就不会执行函数代码,会得到一个结果,该结果就是生成器   生成器就是迭代器   yield的功能 1.yield为我们提供了一种自定义迭 ...

  2. Netty服务端Server代码说明

    本文是简单的Netty启动服务端代码理解笔记 public class MyServer { public static void main(String[] args) throws Excepti ...

  3. 正则re高级用法

    search 需求:匹配出文章阅读的次数 #coding=utf-8 import re ret = re.search(r"\d+", "阅读次数为 9999" ...

  4. 洛谷P4127

    Description 给出两个数 \(a\),\(b\) ,求出 \([a,b]\) 中各位数字之和能整除原数的数的个数 Solution 设 \(f[i][j][k][q]\) 表示 枚举到第 i ...

  5. 大数据开发-Spark-拷问灵魂的5个问题

    1.Spark计算依赖内存,如果目前只有10g内存,但是需要将500G的文件排序并输出,需要如何操作? ①.把磁盘上的500G数据分割为100块(chunks),每份5GB.(注意,要留一些系统空间! ...

  6. MD5、sha加密

    MD5: 不可逆,一般用于密码的加密存储,数字签名,文件完整性验证 MD5码具有高度离散性,不可预测 MD5长度为128位,重复率几乎为0 易受密码分析的攻击 Sha: 对于长度小于2^64位的消息, ...

  7. web.xml 监听器

    一.作用 Listener就是在application,session,request三个对象创建.销毁或者往其中添加修改删除属性时自动执行代码的功能组件. Listener是Servlet的监听器, ...

  8. 自己动手实现java断点/单步调试（一）

    又是好长时间没有写博客了,今天我们就来谈一下java程序的断点调试.写这篇主题的主要原因是身边的公司或者个人都执着于做apaas平台,简单来说apaas平台就是一个零代码或者低代码的配置平台,通过配置 ...

  9. （一）Spring-Boot-操作-Redis

    Spring-Boot-操作-Redis 1.Spring Data Redis 1.1 引入依赖 1.2 配置 Redis 信息 1.3 使用 2.Spring Cache 2.1 引入依赖 2.2 ...

  10. Tomcat优化，JNDI，连接池，数据源

    什么是JNDI? JNDI的简单应用 什么是连接池技术? 连接池 性能 连接池技术与传统数据库连接的比较 连接池技术工作原理 为什么使用连接池? 传统数据库连接方式的不足 企业级开发需要稳健和高效的数 ...