CSS 定位 relative && absolute 问题？
2024-10-19 04:56:17
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
最新文章
- Hibernate5.2之反向工程
- How to set colors of HTML tables
- Luncene 学习入门
- How to setup ELM327 Bluetooth WiFi for Android software Torque
- Asp.net MVC 自定义路由在IIS7以上，提示Page Not Found 解决方法
- jQuery之对话框
- python 数据类型（元组(不可变列表)，字符串
- Python 跳出多重循环
- python基础教程（八）
- kali git 环境配置
- appium 元素定位find_element_by_android_uiautomator方法使用
- centos7中设置nginx的systemctl启动方式
- 关于Failed to check the status of the service com.taotao.service.ItemService. No provider available fo
- Effective Java 第三版—— 87. 考虑使用自定义序列化形式
- centos docker compose安装
- 1012 The Best Rank （25 分）
- Spring笔记②--各种属性注入
- 打包python脚本为exe的坎坷经历, by pyinstaller方法
- C#串口serialPort操作
- Codeforces Beta Round #8 C. Looking for Order 状压