Позиционируйте изображение так, чтобы оно всегда располагалось одинаково независимо от ширины окна

Я пытаюсь разместить изображение на своем веб-сайте так, чтобы оно выглядело так, будто оно обложено на веб-сайте, во внешней юбке блока корпуса, как так:Позиционируйте изображение так, чтобы оно всегда располагалось одинаково независимо от ширины окна

enter image description here

мне удалось получить это позиционирование с помощью позиции: абсолютный; css, а затем поместите изображение с использованием верхних/правых значений. Проблема заключается в том, однако, что это работает только для моего дома всего экрана (и другие с тем же Резом, конечно), и как только я сузить окно выглядят следующим образом:

enter image description here

Изображение смещается внутрь потому что мой css говорит об этом. Кто-нибудь понял, какой атрибут CSS я должен использовать, чтобы изображение было размещено в одном и том же месте независимо от того, насколько широка это окно?

EDIT: Это CSS, что я решил его с помощью входа от Джорджа и Ed:

#picture-container { 
      position: relative; 
      max-width: 1px; 
      max-height: 1px; 
     } 

     #image { 
      position: absolute; 
      right: -932px; 
      top: -30px; 
     }

источник

2013-03-14 AndroidHustle

Можете ли вы разместить пример кода? Исправить будет добавление 'position: relative' в ваш контейнер, а затем положение изображения относительно этого. – CherryFlavourPez

@ Ed-M Спасибо Ed! Да, я попробовал это. Проблема заключалась в том, что на изображении должно было быть оставлено большое отверстие пустого места. Знаете ли вы, могу ли я указать, что я не хочу, чтобы этот владелец места для относительного позиционирования? – AndroidHustle

Вам нужно будет применить «позицию: относительный» к контейнеру, а затем использовать «position: absolute» на самом изображении (вывести его из потока документов). Вот простой пример: http://jsfiddle.net/cherryflavourpez/J5srJ/ – CherryFlavourPez

Исправление будет добавить position: relative к контейнеру (создание нового контекста позиционирования), а затем поместить изображение относительно что. В настоящее время вы позиционируете img относительно body.

Отъезд this fiddle, который показывает разницу, которую делает декларация, снимок экрана ниже.

enter image description here

Я действительно рекомендую тратить 5 минут и чтение this, чтобы убедиться, что вы на использовании CSS для макета и положение вещей.

источник

2013-03-14 15:35:07 CherryFlavourPez

Большое спасибо за ваш ввод и ссылку – AndroidHustle

Вы должны добавить

position: relative;

в контейнер содержимого, а затем иметь изображение, помещенное абсолютно внутри этого. Абсолютное позиционирование будет основано на том, что div, а не на странице.

источник

2013-03-14 15:23:31

Большое спасибо! Это точно то, что я искал! – AndroidHustle

Чтобы поместить изображение вне основной DIV, используйте отрицательные значения справа:

.image{ 
    position: absolute; 
    top: 200px; 
    right:-50px; 
}

источник

2013-03-14 15:30:08

Это было именно то, что я использовал, и это позиционирование регулируется тем, насколько широким является окно, из-за которого изображение будет перемещаться. – AndroidHustle

Но вам нужно установить «relative» в положение основного div. –

Как и люди, упомянутые выше, это связано с относительным положением. Однако для того, чтобы он оставался неподвижным, вы должны сделать div, который плавает, и не является частью обычной компоновки содержимого.

Вот пример код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>CSS Example</title> 
    <style> 
     body, html {padding: 0; margin: 0;} 
     #wrapper {width: 960px;margin: 0 auto;} 
     .floater {height: 100%; width: 100%;position: absolute;} 
     .inner-float {position: relative; width: 1020px; margin: 0 auto;text-align: center;} 
     .inner-float img {width: 150px; top: -10px; right: 0px;position: absolute;} 
     .content {} 
    </style> 
</head> 
<body> 
    <div class="floater"> 
     <div class="inner-float"> 
      <img src="./clipboard_icon.png" /> 
     </div> 
    </div> 
    <div id="wrapper"> 
     <div class="content"> 
      <p> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
      <p> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
      <p> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
     </div> 
    </div> 

</body> 
</html>

Надеется, что это помогает.

-e

источник

2013-03-14 15:53:38 ericg

, если вы можете использовать проценты, то здесь это способ сделать объект действительно оставаться на месте. dont опустить тело CSS

<body style="padding:0; margin:0"> 

<div> 

<div style="background-color:red; width:100%; height:300px; position:relative;"> 

<div style="background-color:green; width:100px; height:100px; position:absolute; margin: 10%;"></div> 

</div></div> 

</body>

источник

2015-05-31 09:30:09

Позиционируйте изображение так, чтобы оно всегда располагалось одинаково независимо от ширины окна

ответ

Смежные вопросы