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
推荐阅读
-
一张图看懂css的position里的relative和absolute的区别_html/css_WEB-ITnose
-
CSS控制前台样式在360和chrome的兼容问题,跪求高手帮忙,在线等,,,,,,,_html/css_WEB-ITnose
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
div2 在 div3中, 希望div2的高度填满div3_html/css_WEB-ITnose
-
关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose
-
解说css中的margin属性缩写方式_html/css_WEB-ITnose
-
DIV CSS display (block none inline)属性的用法_html/css_WEB-ITnose
-
html中播放swf文件,怎么显示下面的开关面板的部分?_html/css_WEB-ITnose
-
JS获取对象的某个CSS属性值的问题_html/css_WEB-ITnose
-
CSS中可以和不可以继承的属性实例讲解