Не работает position: absolute
Товарищи, есть div, в нем image. При увеличении image, когда размер становится больше границ div'а, собственно image уходит за края.
То есть у div'a стоит стиль overflow: hidden; Все так и надо. Теперь мне нужно спозиционировать image относительно окна документа. Если использовать position:absolute, то image отображается так же как и position: relative, то есть относительно краев div'а. Понятно, что можно указать отрицательные координаты top и left и таким образом увести image за левый и верхний край. Но может быть все таки через position: absolute должно работать? Мои соображения таковы, что при позиционировании со стилем position:absolute элемент(в моем случае image) выносится за тэг div, то есть перестает быть вложенным, но это видимо невозможно так как стоит owerflow:hidden у div'a. А как оно на самом деле?) PS Вот код: <div id="view_window" style="position:absolute; left:200px; top:100px; width:700px; height:700px; z-index:2; overflow: hidden;> <img id='map' src="images/Boss.JPG" width="729" height="664" style='position:absolute; left:50px; top:50px'/> </div> |
У div'а стоит position: absolute, поэтому вложенные элементы позиционируются относительно его.
|
То что стоит у div'a влияет на расположение самого div'a относительно элемента в котором он находится. Разве нет?
В любом случае не помогает менять стиль position div'a. |
Сделал расположение image относительно div'a. Координаты получаются отрицательные, но это не критично для моего случая.
Почему не работает абсолютное позиционирование для меня остается загадкой. |
Цитата:
|
Kolyaj,
Я вам тоже написал, что это не так. position: absolute у div'а влияет на расположение самого div'а относительно элементов в которые он вложен, но не на элементы вложенные в этот div |
ыыы что споришь то?) Так элементы вложенные в див позиционируются относительно этого дива, если у них position не равно absolute.
|
Цитата:
У меня как раз position элемента(img) вложенного в див равно absolute но он все равно позиционируются относительно дива |
B@rmaley.e><e,
Если у image position будет statiс, то image располагается как обычно. static - параметр по умолчанию. В общем, спозиционировать image, если он вложен в div относительно окна документа никак нельзя, правильно? |
bayah,
Относительно вьюпорта — position: fixed. |
…кстати, из-за «особенности»
position: fixed можно делать вот такие вот штуки (прокрутите полосу прокрутки вниз):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
html, body {
margin: 0px;
}
.f {
position: relative;
height: 20px;
}
.y {
background: white url(http://img.yandex.net/i/www/logo_bd.png) 50% 50% no-repeat fixed;
width: 100%;
position: fixed;
height: 30px;
}
.g {
background: white url(http://google.ru/intl/en_com/images/logo_plain.png) 50% 50% no-repeat fixed;
width: 100%;
position: absolute;
height: 30px;
}
</style>
</head>
<body>
<div class="f"><div class="g"></div><div class="y"></div></div>
<div class="f"><div class="g"></div><div class="y"></div></div>
<div class="f"><div class="g"></div><div class="y"></div></div>
<div class="f"><div class="g"></div><div class="y"></div></div>
<div class="f"><div class="g"></div><div class="y"></div></div>
<div class="f"><div class="g"></div><div class="y"></div></div>
<div class="f"><div class="g"></div><div class="y"></div></div>
</body>
</html>
«Домашнее задание» — разобраться, почему это работает. :) |
Если fixed, то картинка висит в одной и той же части окна браузера и не скролится вместе со страничкой. Еще и поверх div'а игнорируя его owerflow:hidden.
Мне не подходит. |
Цитата:
|
subzey,
Это, но в контексте всей темы. Если коротко, то нужно двигать imag так, чтобы он обрезался краями div'a и при этом image позиционировать относительно документа. |
subzey,
А кстати, ваш яндекс должен висеть в одном месте окна при скроллинге? Потому что у меня он скролится обычно. Просто вижу там в CSS fixed, но в CSS не очень разбираюсь пока. |
bayah,
а что за браузер у Вас? |
subzey,
Файрфокс 3.6.3 и Хром В обоих - скролится. |
О блин, только теперь дошло что за эффект в вашем коде. У меня страничка
форума по ширине не помещается я справа не заметил скролл. Думал что вся картинка должна просто отображаться не скролясь. |
Цитата:
|
Да приведите вы уже пример банальный для меня.
Я руководствуюсь этим: http://htmlbook.ru/css/position.html И эмпирическими знаниями. У меня все сходится. |
Цитата:
http://softwaremaniacs.org/blog/2005...t-positioning/ учите. |
|
Цитата:
|
Верно.
|
Спасибо всем за участие.)
|
| Часовой пояс GMT +3, время: 11:47. |