css中left和margin-left的区别
来源:互联网 发布:观看农村淘宝的感想 编辑:程序博客网 时间:2024/05/21 06:54
研究下拉菜单和弹出菜单时比较所得:
1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置:
测试代码:
测试效果:
不设置红线框的position,设置蓝线框的position,绿线框的位置:
设置红线框的position,设置蓝线框的position,绿线框的位置:
2.设置margin-left则只会出现在父对象的左边的相对位置,不考虑是否设置了position。
测试代码:
不设置红线框的position,设置蓝线框的position,绿线框的位置:
设置红线框的position,设置蓝线框的position,绿线框的位置:
3.设置margin-right无法起到将element定位到右边相距XX位置,但设置right可以。
测试代码:
<div style="position:relative;width:98px;height:63px;background-image:url('images/pic.png');margin-left:100px;margin-top:300px;">
<img src="images/delete.gif" style="position:absolute;top:-10px;right:-5px;"/>
</div>
测试效果:
设置margin-right
1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置:
测试代码:
测试效果:
不设置红线框的position,设置蓝线框的position,绿线框的位置:
设置红线框的position,设置蓝线框的position,绿线框的位置:
2.设置margin-left则只会出现在父对象的左边的相对位置,不考虑是否设置了position。
测试代码:
不设置红线框的position,设置蓝线框的position,绿线框的位置:
设置红线框的position,设置蓝线框的position,绿线框的位置:
3.设置margin-right无法起到将element定位到右边相距XX位置,但设置right可以。
测试代码:
<div style="position:relative;width:98px;height:63px;background-image:url('images/pic.png');margin-left:100px;margin-top:300px;">
<img src="images/delete.gif" style="position:absolute;top:-10px;right:-5px;"/>
</div>
测试效果:
设置margin-right
设置right
关于绝对定位相关解释:http://www.divcss5.com/rumen/r403.shtml
阅读全文
0 0
- css中margin-left和left的区别
- css中left和margin-left的区别
- css中margin-left与left的区别
- css中margin-left与left的区别
- css中margin-left与left的区别
- css中margin-left与left的区别
- css中margin-left与left的区别
- left 和 margin-left 的区别
- HTML里margin-left和left的区别
- [CSS]---margin-left例子
- IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法
- IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法
- css left top和transform的区别
- 关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;
- jquery 设置css margin-left
- css margin-left在IE6下的问题的解决方法
- CSS display:inline和float:left两者的区别
- 关于JS下offsetLeft,style.left,以及jquery中的offset().left,css("left")的区别。
- 界面加载完后执行Jquery
- 关于怎么读取Maven项目resource目录下面的文件
- Android—(第三方百度地图)
- 编写自己的代码库(javascript常用实例的实现与封装)
- C语言文件操作 和 预编译命令
- css中left和margin-left的区别
- Lucene在Eclipse下的部署
- js前端实现模糊查询
- JavaScriptCore的坑? 可能,待研究(JSExportAs方式绑定的本地通信)
- Linux设备模型(7)_Class
- 日常学习之 std::pair
- WARN No appenders could be found for logger的解决方法
- 最大子矩阵和
- java数据格式转换