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. 转 1 认识开源性能测试工具jmeter

    1 认识开源性能测试工具jmeter   典型的性能测试工具主要有2个,Load Runner和jmeter.Load Runner是商业化的,Jmeter是开源的.下面我们认识一下开源性能测试工具j ...

  2. history附上时间戳，history命令_Linux history命令：查看和执行历史命令

    起因是这样的,一台机器客户反馈连接不上,说没有任何操作.好吧,排查吧. 1.第一步先看网络是否通: 从图中可以看到一开始是一直不通的.然后就通了,问了客户有没操作重启什么的结果说没有任何操作,还让给个 ...

  3. Language Guide (proto3) | proto3 语言指南（五）使用其他消息类型

    Using Other Message Types - 使用其他消息类型 可以将其他消息类型用作字段类型.例如,假设您希望在每个SearchResponse消息中包含Result消息--为此,您可以在 ...

  4. hive-2.2.0 伪分布式环境搭建

    一,实验环境: 1, ubuntu server 16.04 2, jdk,1.8 3, hadoop 2.7.4 伪分布式环境或者集群模式 4, apache-hive-2.2.0-bin.tar. ...

  5. ajax 用fom提交

    $.ajax({ type : "POST", url : "${ctx}/credit/LoanauditCtrl/qwe.do?hetong="+heton ...

  6. linux命令--ssh创建隧道

    工作应用场景 在工作中,总会连接到各种不能直接访问的环境,所以我们必须使用ssh隧道进行访问. 原理简介 ssh隧道:https://www.jianshu.com/p/20600c91e656

  7. 500行SQL快速实现UCF

    写在前面话 UCF通常是User-base Collaborative Filter的简写;大体的算法思路是根据用户行为计算相似群体(邻居),为用户推荐其邻居喜好的内容:感觉是不是很简单.那废话不多说 ...

  8. 2019 ICPC 上海区域赛总结

    2019上海区域赛现场赛总结 补题情况(以下通过率为牛客提交): 题号 标题 已通过代码 通过率 我的状态 A Mr. Panda and Dominoes 点击查看 5/29 未通过 B Prefi ...

  9. 2019牛客暑期多校训练营(第三场) F.Planting Trees(单调队列)

    题意:给你一个n*n的高度矩阵 要你找到里面最大的矩阵且最大的高度差不能超过m 思路:我们首先枚举上下右边界,然后我们可以用单调队列维护一个最左的边界 然后计算最大值 时间复杂度为O(n*n*n) # ...

  10. cmath取整函数

    #include <iostream> #include <cmath>//头文件 using namespace std; int main () { double n; c ...