Floolute Div over Absolute Positioned Div

时间:2015-03-19 00:31:48

标签: css responsive-design css-float

我正在努力实现这个目标: 屏幕左侧宽1000像素,高350像素的图像。电子邮件捕获位于屏幕右侧。我希望电子邮件div位于1024px,1200px等图像的一部分,但是当屏幕展开(或在更大的屏幕上观看)时,我希望两者分开,然后停在最大宽度。我相信我已经实现了这一过程。

我的第二个问题是当屏幕小于1024时,我希望电子邮件捕获低于图像。

我现在将这个设置作为一个绝对定位的图像和一个漂浮的div,它的最大宽度为包含div的两个。但是使用绝对位置时,浮动div不会立即滑动到绝对放置的图像下方,而是在屏幕的左右两侧之间来回抖动,最后到达图像顶部...

http://new.healthcareexcellence.org/

1 个答案:

答案 0 :(得分:0)

图像容器position: absolute;上的.home-featured-left是罪魁祸首。

你需要在不需要时(一旦你达到小屏幕尺寸)'禁用'绝对定位。有很多方法可以解决它,但最简单的方法是添加以下内容:

.home-featured-left {
    position: static;
}

进入媒体查询以获取小屏幕尺寸:@media only screen and (max-width: 960px)