div position:static
Как отталкиваться от левого верхнего угла родительского div-a, если родительский div имеет position:static ( то есть вложенный див с position:absolute будет цепляться к краю окна браузера ). При условии, что у родителя position:static менять на что-либо другое невозможно.
средствами css без js. |
Цитата:
|
исходный див на момент добавления потомка непуст.
|
То есть, если использовать position: relative, то отсчет начнется от того места, где будет первоначально вставлен наш потомок, а это не левый верхний угол родителя, само собой.
|
Цитата:
|
Цитата:
Но даже если я его сделаю динамически добавляющимся - условно говоря, вставив див с relative в начало, все остальное у меня уедет. при absolute другие элементы отображаются на веб-странице словно absolute позиционированного элемента нету. |
Цитата:
Можно попробовать добавлять в начало элемент с position: relative и нулевой шириной/высотой, и уже в него аппендить нужный элемент. |
Rootpassword, начинай уже делать тестовые примеры, хорош лениться...
|
можно так подвинуть абсолютно позиционированный элемент внутри статического, просто маржинами
по стандарту, если у абсолютно позиционированного нет left top, то он должен быть на месте где был бы, если бы он был static
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
<div style="width:200px; height:100px; border: 1px solid;">
<div style="width: 50px; height: 50px; position: absolute; background: red; opacity:0.5; margin: 10px;">
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
|
Пример того, что мне надо. Основной див тут- position:relative, нужен static
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
<div style="width:400px; height:300px; border: 1px solid; position:relative; ">
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
<div style=" position: absolute; background: green; opacity:0.5; width:100%; height:100%; top:0px; left:0px; ">
</div>
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
Пытаемся так(предложение trikadin) Нету доступа к размерам дива(100%-это 0)
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
<div style="width:400px; height:300px; border: 1px solid; position:static; ">
<div style=" position: absolute;">
<div style=" position: absolute; background: green; opacity:0.5; width:100px; height: 100px; ">
</div>
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
Аналогично у Pavel M. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
<div style="width:400px; height:300px; border: 1px solid; position:static; ">
<div style=" position: relative;">
<div style=" position: absolute; background: green; opacity:0.5; width:100px; height: 100px; "></div>
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
</div>
<p>adfaf adfad fasdf</p>
<p>adfaf adfad fasdf</p>
</body>
</html>
|
Да нет, отлично понял )) Пытался совместить его идею и идею Павла. Общая проблема обоих вариантов - нет доступа к размерам оригинального дива, который position:static;
А цепляются оба к верхнему углу вполне корректно. |
в первом сообщении темы было
> Как отталкиваться от левого верхнего угла родительского div-a, если родительский div имеет position:static > ... > средствами css без js. или уже нужно что-то другое? |
Цитата:
|
Цитата:
|
может стоит промежуточный контейнер <div> с relative прописать? то есть в свой static вложи промежуточный с relative, а в него уже absolute ?
|
e-do, уже предлагали... И вообще, это некропост.
|
Цитата:
|
e-do, просто вопрос уже решён был)
|
| Часовой пояс GMT +3, время: 14:13. |