Why is there no difference between absolute positioning and relative positioning_html/css

Why is there no difference between absolute positioning and relative positioning_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:41

Original

1226 people have browsed it

<!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>

Copy after login

<div id="box06">         <div id="box07">        1111        </div>                 <div id="box08">        1111        </div>        </div>

Copy after login

#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;}

Copy after login

1. Box07 uses relative positioning and box08 uses absolute positioning. Why is the effect the same? ?

2. If you want box06 to be centered when the page is expanded or reduced, box07 should also be centered

box08 has always been 30px away from the left

And box07 and box08 are both in box06. How to do it?

Reply to discussion (solution)

1. box07 uses relative positioning and box08 uses absolute positioning. Why are the effects the same?

They are all 30px away from the left side of box06

The IDs of both divs are within box06. How can I expand or shrink the page differently?

2. If you want box06 to be centered when the page is expanded or reduced, box07 should also be centered

How to make box08 always 30px away from the left side of the page

And box07 and box08 are both in How to do it in 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>

Copy after login

box07 and box08 still move together. I hope that when the page is reduced, their distance from the left is The same, but when the page is enlarged, the position from the left is different

box07 and box08 still move together, I hope when zooming out When the page is on the left, their position from the left is the same, but when the page is enlarged, the position from the left is different

What is the difference between enlarging and reducing the page under a relative left positioning? What's the difference?
If you don’t consider how to position it
What state do you want the page to be in depending on how big it is?
There are several sizes and states
This description is clear. Let’s take a look at how to position it

I feel a little dizzy,,,,

The parent uses position:relative;
The child uses position:absolute;