为了账号安全,请及时绑定邮箱和手机立即绑定

关于例子的一点疑问?

ul向左偏移-50%,为什么不写成向右偏移50%,编程的原则不应是越简洁越好吗?

正在回答

4 回答

left:50%  针对浏览器向右移动50%

left:-50%针对父级元素向左移动50%

父级有定位,子元素针对父级定位进行偏移,所以显示居中

http://img1.sycdn.imooc.com//573cf7da0001966608190460.jpg

希望对你有帮助!


5 回复 有任何疑惑可以回复我~
#1

qq_食草男_03324359 提问者

向左还是向右是从正负号来分的,那么针对浏览器还是针对父级元素从哪里分辨?
2016-05-19 回复 有任何疑惑可以回复我~
#2

suiye1202 回复 qq_食草男_03324359 提问者

如果没有定位父级就是针对浏览器, 如果有定位父级,就以最近的定位父级作为基准
2016-05-22 回复 有任何疑惑可以回复我~
#3

风早君418 回复 suiye1202

position:relative不是相对于原位置移动吗
2016-05-30 回复 有任何疑惑可以回复我~
#4

suiye1202 回复 风早君418

不是的 如果父子级都有定位,那么子级的移动是针对最近的定位父级(不管是相对还是绝对定位)偏移 如果父子级中,最有子级有定位,那么子级的移动是针对文档进行定位
2016-06-04 回复 有任何疑惑可以回复我~
#5

suiye1202 回复 风早君418

不好意思,看错了 父级没有定位 子级相对定位是针对自己原来的位置进行偏移 子级绝对定位 是父级不管是相对定位还是绝对定位,只要是有定位 那么子级的绝对定位都针对父级进行偏移 父级相对定位 子级相对定位 父级相对定位没有脱离文档流,子级会随着父级的相对定位偏移量移动到新的位置 这个新的位置就是子级的相对定位的原来位置 希望对你有帮助!
2016-06-04 回复 有任何疑惑可以回复我~
查看2条回复

不一样,与边框距离不一样。你可以把50%改为70%看看,再加上有色边框border:1px solid red,这样看的比较清楚,你试试。

你设置left:-50%就是浏览器左边框div的右边框50%的距离。

right:50%是浏览器右边框div的右边框50%的距离。

比如:

<style>

.wrap{

    border:1px solid red;

    float:left;

    position:relative;

    left:70%;

}

.wrap-left{

    border:1px solid blue;

    position:relative;

    left:-70%;}

.wrap-right{

    border:1px solid yellow;

    position:relative;

    right:30%;}

</style>

</head>

<body>

<div class="wrap">

    <div class="wrap-left">我们来学习一下这种方法。</div>

    <div class="wrap-right">这种方法,我们来学习一下。</div>

</div>

</body>

</html>


1 回复 有任何疑惑可以回复我~
#1

qq_食草男_03324359 提问者

是不是 left:-50%就是浏览器左边框离div的右边框50%的距离。 left:50%就是浏览器左边框离div的左边框50%的距离。 right:50%是浏览器右边框离div的右边框50%的距离。 right:-50%是浏览器右边框离div的左边框50%的距离。
2016-05-18 回复 有任何疑惑可以回复我~
#2

qq_茶神归来_03552782

-70%是针对于你的父元素红色框的70%距离啊,蓝色框相对于父元素红色框70%距离的哇?
2016-07-05 回复 有任何疑惑可以回复我~

......什么意思啊?

0 回复 有任何疑惑可以回复我~

left < right

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于例子的一点疑问?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号