欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css中的top和left属性_html/css_WEB-ITnose

程序员文章站 2022-04-17 07:58:13
...
### top属性需要和absolute绑定使用1. 如果一个元素设置了top和left属性,且本身设置了position属性,值为absolute或者relative效果是:以距离它最近的position属性为absolute或relative的父元素进行偏移,如果没有这样的父元素,则以body元素进行偏移.例如:```.father {	width:1000px;	height: 1000px;	position: relative;	background-color: blue;}.son {	width:333px;	height: 333px;	background-color: white;	top:166px;	left: 66px;	position: relative;}```### margin和absolute同事存在 顺便说下,如果我们在给一个元素同时设置了margin和position值时,可能会出现margin不生效的状况```.father {	width:1000px;	height: 1000px;	position: absolute;	background-color: blue;        margin:0 auto;}```此时,father类所对应元素的margin效果是不生效的.因为* 绝对定位absolute是根据它的祖先元素(最近一个设置了position属性的上级元素)利用设置top和left属性来进行偏移.* margin则是根据它的父元素来进行偏移### 总结也就是说   * 如果一个元素设置了position属性,那么它的偏移就该用top,left来设置   * 如果想要让它相对与父元素偏移,则父元素也要设置position属性,如果没有其他需要的话,建议用relative   * 如果本元素设置了position属性为absolute后,margin的设置就无效了   * 要想本元素的margin生效,那么自己的position属性应该设置为relative