Есть ли окно отключено плавающее div вместо того, чтобы нажимать его на

Question

В настоящее время у меня есть раздел на веб-сайте, который имеет некоторый абсолютный текст, который накладывает изображение. Это выглядит хорошо, когда окно велико, но я хочу использовать медиа-запрос в определенной точке окна.

В любом случае, вот что сейчас происходит: http://gyazo.com/ae86c3b3ab4028f32ad6ad6c846fb151

перемещаемого правое изображение движется, как я сделать окно меньше. Я хочу, чтобы он остался на месте и просто отключил окно. Имейте в виду I НЕ хотите, чтобы горизонтальная полоса прокрутки появлялась, когда она разрезала ее, я просто хочу, чтобы отрезанный отрезок не исчез.

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; на изображении, как это делает изображение не перемещается при изменении размеров окна.

<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>

.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; 
 
}

Answer 2

Если я правильно понимаю ваш вопрос, вы можете потерять поплавок и использовать позицию вместо этого. Что-то вроде этого:

Это немного легче увидеть в jsFiddle, попробуйте изменить размер кадра.

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

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