Question

目前，我在网站上有一个部分，其中包含一些覆盖图像的绝对文本。当窗口很大时，这看起来很好，但我想在窗口的某个点使用媒体查询。

无论如何，这是目前正在发生的事情： http://gyazo.com/ae86c3b3ab4028f32ad6ad6c846fb151

浮动的右图像正在移动，因为我使窗口变小。我希望它留在原地，让窗户切断它。请记住，不要想要在切断它时出现水平滚动条，我只是希望切掉的部分消失。

HTML

<div class="sectionone">
        <div class="headingwrap">
            <h2>Heading Text</h2>
            <h3>Subheading Text</h3>
            <a href="">Free Demo</a>
        </div>
        <div class="imgwrap">
            <img src="resources/chloestore.png">
        </div>
    </div>

CSS

.imgwrap {
    width:70%;
    min-width:700px;
    overflow: hidden;
    float: right;
    margin-top:74px;
    margin-bottom:1000px;
}

img {
    width: 100%;

}
.headingwrap {
    margin-top:200px;
    margin-left:50px;
    float:left;
    color: #464646;
    letter-spacing: 1.5px;
    position:absolute;
}

Answer 1

在图像上使用position:fixed; right:0;，因为调整窗口大小时图像不会移动。

＆＃13;

<div class="sectionone">
        <div class="headingwrap">
            <h2>Heading Text</h2>
            <h3>Subheading Text</h3>
            <a href="">Free Demo</a>
        </div>
        <div class="imgwrap">
            <img src="resources/chloestore.png">
        </div>
    </div>

＆＃13;

.imgwrap {
    width:70%;
    min-width:700px;
    overflow: hidden;
    float: right;
    margin-top:74px;
    margin-bottom:1000px;
    position:fixed; /* This is the important part */
    right:0px; /* May not need this */
}

img {
    width: 100%;

}
.headingwrap {
    margin-top:200px;
    margin-left:50px;
    float:left;
    color: #464646;
    letter-spacing: 1.5px;
    position:absolute;
}

＆＃13;

Answer 2

如果我理解你的问题，你可能想要松开浮动并改用位置。像这样：

有点容易看到 jsFiddle，尝试调整结果框的大小。

＆＃13;

body{
    position:relative;
    width:100%;
    min-width:600px;
    overflow-x: hidden;
    margin:0;
}
img{
    position:absolute;
    right:0;
}

＆＃13;

<img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1"/>

＆＃13;

有窗户切掉漂浮的div而不是推过它

2 个答案: