css中的top和left属性_html/css_WEB-ITnose
程序员文章站
2022-03-17 15:49:09
...
### 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
推荐阅读
-
HTML5中新增加的结构元素、网页元素和全局属性
-
html/css中map和area的应用
-
如何使用php脚本给html中引用的js和css路径打上版本号
-
前端基础之--css中可被继承和不可被继承的属性
-
CSS背景图片和HTML中的img标签使用实例
-
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
-
JS和jQuery通过this获取html标签中的属性值(实例代码)
-
用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表“
-
工作中遇到的HTML和CSS布局和JavaScript技巧记录分享
-
推荐深入理解css中的position定位和z-index属性