一、定位
1、固定定位:fixed 相对于浏览器进行具体数值的定位,会脱离正常的文档流
position:fixed;
right:100px;
top:100px;
必须与left、right、top、bottom配合使用才能起到固定定位的作用,将元素定位到浏览器的具体位置上。
2、相对定位:relative 相对于自己当前的定位。不会脱离文档流,只是样子离开了,就好像灵魂出窍一样。
position:relative;
right:100px;
top:100px;
必须与left、right、top、bottom配合使用才能起到固定定位的作用,将元素定位到浏览器的具体位置上。
3、绝对定位:absolute 相当于设置了定位的父元素或者是祖先元素进行定位,会脱离文档流。
(子绝父相:子元素使用绝对定位,父元素使用相对定位)
css中:
#parent{
width: 600px;
height: 600px;
background-color: skyblue;
margin: 100px auto;
position:relative;
}
img{
width: 100px;
height:150px;
/*绝对定位*/
position: absolute;
top: 450px;
left:500px;
}
html中:
<div id="parent">
<img src="../../立方体与选项框/img/1.jpg"/>
</div>
注:当把父元素