html定位

Question

<div class="ds-wp ds-mg ds-diaod-ct">
        <div class="ds-ct-top"></div>
        <div class="ds-ct-img"></div>
</div>

.ds-wp{width:1200px;}
.ds-mg{margin:0 auto;}
.ds-diaod-ct{position:relative;}
.ds-ct-img{position:absolute;background:url(../images/ds1.png) no-repeat center center;width:377px;height:357px;top:0px;left:-250px; }

我要是按照上面的写法整个1200px宽的div是自适应的，ds-diaod-ct不会被ds-ct-img这个div撑开，但是我要是把ds-ct-img设置成right:-250px;怎么整个ds-diaod-ct就出现横向滚动条了

Answer 1

题主的问题：“设置left：-250px，整个屏幕不会出现横向滚动条，整个屏幕是自适应的，要是设置right：-250px，整个屏幕就会出现滚动条，不再自适应了。这是为什么？”

自适应是CSS的一种布局方式，不是指你说的“不可见”，有点不准确啊，O(∩_∩)O哈哈~

默认情况下，浏览器进行页面布局基本过程是以浏览器可见区域为画布，左上角为（0,0）基础坐标，从左到右，从上到下从DOM的根节点开始画，题主描述的情况是有一部分内容超出了浏览器的可见区域，所以浏览器不绘制相应画面。

可以设置html的方向html{direction:rtl;}，这时候你就可以看到“设置left：-250px，整个屏幕会出现滚动条；设置right：-250px，整个屏幕不会出现滚动条”。

参考：Web底层剖析，浏览器是如何工作的

Answer 2

ds-ct-img是绝对定位，设置left，top等候，脱离文档流，不会撑开包含块；

right -250px后并没有撑开或者变大ds-diaod-ct的宽度，只是溢出了，超过了边界，浏览器在显示这部分的时候，如果溢出不隐藏，可见，则会显示滚动条，ds-diaod-ct设置overflow：hidden就不会出现滚动跳了