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. jmeter-登录获取cookie后参数化，或手动添加cookie， 再进行并发测试

    以下情况其实并不适用于直接登录可以获取cookie情况,直接可以登录成功,直接添加cookie管理,cookie可以直接使用用于以下请求操作. 如果登录一次后,后续许多操作,可以将cookie管理器放 ...

  2. Redis持久化之RDB和AOF

    Redis是一个键值对数据库服务器,由于Redis是内存数据库,那么有很多内存的特点,例如掉电易失,或者进程退出,服务器中的数据也将消失不见,所以需要一种方法将数据从内存中写到磁盘,这一过程称之为数据 ...

  3. Redis-第六章节-事务

    目录 简介 执行过程 特点 案例 watch 简介 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 执行 ...

  4. 「THP3考前信心赛」解题报告

    目录 写在前面&总结: T1 T2 T3 T4 写在前面&总结: \(LuckyBlock\) 良心出题人!暴力分给了 \(120pts\) \(T1\) 貌似是个结论题,最后知道怎么 ...

  5. 我的刷题单（8/37）（dalao珂来享受切题的快感

    P2324 [SCOI2005]骑士精神 CF724B Batch Sort CF460C Present CF482A Diverse Permutation CF425A Sereja and S ...

  6. Spring Boot 核心配置文件 bootstrap & application

    Spring Boot 核心配置文件 bootstrap & application 1.SpringBoot bootstrap配置文件不生效问题 2.bootstrap/ applicat ...

  7. linux日志中查找关键字、前几行、结尾几行，Linux的find用法示例

    linux在日志中查找关键字.前几行.结尾几行,Linux的find用法示例 1.linux在日志中查找关键字.前几行.结尾几行 1.1查看日志 前 n行: 1.2查看日志 尾 n行: 1.3根据 关 ...

  8. python模块----paramicko模块 （ssh远程主机并命令或传文件）

    paramiko模块 paramicko模块是非标准库模块,需要pip下载 paramicko:模拟ssh登陆linux主机,也有上传下载功能.ansible自动化部署软件底层就有应用paramick ...

  9. （25）Vim 1

    1.安装Vim CentOS 系统中,使用如下命令即可安装 Vim: yum install vim 需要注意的是,此命令运行时,有时需要手动确认 [y/n] 遇到此情况,选择 "y&quo ...

  10. hdu3480 Division

    Problem Description Little D is really interested in the theorem of sets recently. There's a problem ...