Heim > Artikel > Web-Frontend > 绝对定位与相对定位为什么没区别_html/css_WEB-ITnose
绝对定位与相对定位为什么没区别_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:411208Durchsuche
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#box_relative { position: absolute; left: 30px top: 192px; width: 800px; height: 100px; background-color: #00F; left: 95px; top: 253px;}#box01 { position: absolute; left: 72px; top: 50px; width: 300px; height: 20px; background-color: #000; z-index: 1;}#box02 { position:relative; top: 103px; width: 300px; height: 20px; background-color:#0F0; margin-left:100px;}#box03 { position:relative; top: 103px; width: 300px; height: 20px; background-color:#600; margin-left:auto; margin-right:auto;}#box06 { position:relative; width: 800px; height: 100px; background-color: #F39; top: 619px; margin-left:auto; margin-right:auto; z-index: -1;}#box07 { position:relative; width: 300px; height: 30px; background-color:#0F0; left:30px;}#box08 { position: absolute; top: 46px; width: 300px; height: 30px; background-color: #0F0; margin-left: auto; margin-right: auto; left: 30px;}</style></head><body><div id="box03"> 1111 </div><div id="box_relative"> <div id="box01"> 1111 </div> <div id="box02"> 1111 </div> </div><div id="box06"> <div id="box07"> 1111 </div> <div id="box08"> 1111 </div> </div></body></html> <div id="box06"> <div id="box07"> 1111 </div> <div id="box08"> 1111 </div> </div>
#box07 { position:relative; width: 300px; height: 30px; background-color:#0F0; left:30px;}#box08 { position: absolute; top: 46px; width: 300px; height: 30px; background-color: #0F0; margin-left: auto; margin-right: auto; left: 30px;} 1、box07使用相对定位，box08使用绝对定位，为什么效果是一样的？
2、请问如果想让box06在页面扩大或者缩小都居中，box07 也居中
box08一直距离左边30px
并且box07与box08都在box06中，怎么做？
回复讨论(解决方案)
1、box07使用相对定位，box08使用绝对定位，为什么效果是一样的？
都相距box06左边30px
都在div的id都在box06内，怎么才能在页面扩大或者缩小是不一样？
2、请问如果想让box06在页面扩大或者缩小都居中，box07 也居中
box08一直距离页面左边30px 怎么做
并且box07与box08都在box06中，怎么做？
<style type="text/css">#box06 { position:relative; width: 500px; height: 100px; top:50%; left:50%; margin-left:-250px; margin-top:-50px; background-color:#F39;} #box07 { position:absolute; width: 300px; height: 30px; background-color:#0F0; left:50%; top:50%; margin-left:-150px; margin-top:-15px;} #box08 { position:absolute; width: 300px; height: 30px; background-color:#0Ff; left:30px; top:50%;}</style><div id="box06"> <div id="box07">box07</div> <div id="box08">box08</div></div>
box07与box08还是一起动，我希望在缩小的页面时，他们距离左边的位置一样，但是放大页面的，距离左边的位置就不一样了
box07与box08还是一起动，我希望在缩小的页面时，他们距离左边的位置一样，但是放大页面的，距离左边的位置就不一样了
在一个相对左边的定位下，放大和缩小页面有什么区别呢？
如果不考虑怎么定位
你希望在页面多大的情况下 是什么状态
有几种大小情况 几种状态
这个叙述清楚了 我们来看下 用什么方式定位
我表示有点头晕,,,,
父级用position:relative;
子级用position:absolute;
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：关于定位和z-index层叠的问题_html/css_WEB-ITnoseNächster Artikel：转 使用onclick跳转到其他页面/跳转到指定url_html/css_WEB-ITnose