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. 服务端渲染 数据驱动 不是渲染后的网页，而是一个由html和Javascript组成的app ssr 隐藏接口服务器

    小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...

  2. Golang简易版 网站路径扫描demo

    package main import ( "bufio" "fmt" "net/http" "os" "re ...

  3. MySQL按照(windows)及常用命令

    MySQL语法规则 关键字与函数名称全部大写 数据库名称.表名称.字段名称全部小写 SQL 语句必须以分号结尾 MySQL安装 MySQL配置: 在cmd中输入 mysql,提示['mysql' 不是 ...

  4. Golang之垃圾回收

    本篇主要是参考了: http://legendtkl.com/2017/04/28/golang-gc/ 说是参考,但其实基本上是原封不动. GC算法简介: 1. 引用计数 引用计数的思想非常简单:每 ...

  5. Spring Boot整合Spring Data JPA

    1.JPA 2.Spring Data JPA 3.导入依赖 4.连接数据库 5.实体类 6.Repository 7.测试 1.JPA JPA是Java Persistence API的简称,中文名 ...

  6. js截取+全部替换+字符串

    //将关键字标志显示到页面中 function showKeyWord(showStr) { var keyword = $("#keyword").val();//页面中的关键字 ...

  7. Redis挖矿原理及防范

    笔者也曾经被挖矿病毒侵袭过,灰常难受,但是其实你只要了解入侵的手段就非常好防范了,今天我们就演示一下如果通过Redis进行提权获取远程服务器的Root用户. 1.首先我们需要一些先决条件 条件一:你首 ...

  8. 【Spring-Security】Re01 入门上手

    一.所需的组件 SpringBoot项目需要的POM依赖: <dependency> <groupId>org.springframework.boot</groupId ...

  9. C++的匿名函数（lambda表达式）

    总述  C++11提供了对匿名函数的支持,称为Lambda函数(也叫Lambda表达式). 它是定义和使用匿名函数对象的一种简便的方式.匿名函数是我们需要用到的一个函数,但是又不想去费力命名一个函数的 ...

  10. [AHOI2009] [BZOJ1799] 月之迷 （数位DP)

    给出两个数a,ba,b,求出\([a,b]\)中各位数字之和能整除原数的数的个数. 我们按照模板的做法来想,枚举到第pos位时,要确定这一位的数字,可以更新现在所填数字的和,但对于最终的和无从得知,是 ...