получить высоту для позиционирования div в абсолютном режиме
-
06-09-2019 - |
Вопрос
поскольку на мой последний вопрос ответили сразу..Я решил опубликовать новое, от которого у меня вырываются все волосы, XD
это проблема..
у меня есть дизайн с абсолютным позиционированием div..который имеет прозрачный PNG и простой якорь...именно так.
<div class="buyfloat">
<img src="img/buy.png" />
</div>
так..мне нужен этот div.buyfloat, расположенный в абсолютной позиции...не передвигаясь..ни прыжков, ни затухания..мне просто нужно это на расстоянии 200 пикселей от самого низа страницы...потому что мне это нужно только в верхней части нижнего колонтитула..и по мере увеличения или уменьшения высоты страниц..я не могу использовать верхний селектор.
хорошо.."Используйте дно!" ты можешь сказать..да, сэр, я пытался..но почему-то..нижний селектор использует высоту окна (видимую часть) вместо всего.и..если я прокрутлю страницу вниз..изображение находится прямо посередине страницы.
.buyfloat{
width:333px;
height:135px;
position:absolute;
left:10px;
bottom:200px; /** not working **/
margin:5px auto 0 auto;
z-index:99;
}
Я ищу какой-нибудь JavaScript (кажется, я видел его некоторое время назад), который дает мне рост тела прямо на CSS..но если у вас есть другое и более простое решение..Я весь во внимании!
заранее спасибо.
Решение
Имейте в виду, что «позиция:«абсолютный» на самом деле относится к первому предку элемента, который имеет значение позиции, отличное от «статического» (см. пункт 4 в http://www.w3.org/TR/CSS2/visudet.html#taining-block-details).Итак, возможно, у вас такая ситуация, и «дно» измеряется от какого-то другого элемента, а не от html/body.
Другие советы
Во-первых, единственный способ, которым JS работает в CSS, — это «выражение», которое предназначено только для IE, во-вторых, для этого потребуется, чтобы у ваших пользователей также был включен JS.
pos:abs удаляет элемент из обычного макета и помещает его относительно ближайшего абсолютного или относительного родителя.Если вы используете строгий или переходный xhtml, нижняя часть будет работать, если вы просто сделаете тело относительным:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body {height: 9000px;position:relative;}
#a {position:absolute; bottom:0px;}
</style>
</head>
<body>
<div id="a">bottomDweller</div>
</body>
</html>