Позиционирование

alex91 · 13.12.2010, 16:43

Почитал про позиционирование слоев.
Было написано, что при абсолютном позиционировании элемент отображается в левом верхнем углу браузера, но я ставлю свойство absolute у position и этого не происходит.
Кто-нибудь может объяснить?

Цитата:

<html>
<head>
<title>1</title>

<style type="text/css">

#tab1
{
border: 10px solid black;
border-spacing: 10px;
}

</style>

</head>

<body>

<table width="100%" height="100%">
<tr>
<td vAlign="middle">
<table id="tab1" width="75%" height="50%" align="center" rules="all">

<tr width="400">
<td width="200" style="background-color: lightgreen">f</td>
<td width="200">f</td>
</tr>

<tr width="400">
<td width="200">f</td>
<td width="200">f</td>
</tr>

</table>
</td>
</tr>
</table>

<span style="font-size: 18px; position: absolute; z-index: 2;">text</span>

</body>
</html>

Макс-Текс · 13.12.2010, 16:47

Абсолютно позиционированный элемент размещается относительно ближайшего позиционированного родительского элемента.

alex91 · 13.12.2010, 16:59

Так он же слой, или это не влияет??

Добавлено через 1 минуту

И у меня честно говоря с толкованием родительского элемента появляются двусмысленности..

Например,

Цитата:

< table >
< tr >

Здесь

Цитата:

< table >

родительский элемент, а

Цитата:

< tr >

потомок
----
Но

Цитата:

<span>

в моем коде является предком лишь

Цитата:

< body >

Макс-Текс · 13.12.2010, 17:02

Подставьте к стилю вашего SPAN "left: 0; top: 0;" и он будет в левом верхнем углу браузера.
Если нужно изменить последовательность наслоения, то нужно применять свойство z-index.

Добавлено через 1 минуту

У вас родительский блок BODY для этого SPAN'а.

alex91 · 13.12.2010, 17:05

Цитата:

абсолютно позиционированный элемент размещается относительно ближайшего позиционированного родительского элемента.

А родительский блок и родительский элемент - это одно и то же?

Я наверное неправильно понимаю формулировку, которая в цитату взята. Что позиционированный элемент размещается относительно ближайшего позиционированного родительского элемента.
У нас родитель для SPAN только BODY (согласны?)
Что значит в этом случае относительно?

Под родительском блоком тогда понимается тег BODY и все входящие до тега SPAN теги (в нашем случае TABLE)?

Цитата из справочника

Цитата:

position:absolute - указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

Макс-Текс · 13.12.2010, 17:15

Блок и элемент в данном случае - одно и то же.
У SPAN'а только BODY родительский блок/элемент.

alex91 · 13.12.2010, 17:22

Хорошо если блок/элемент в данном случае BODY, то тогда почему элемент размещается не от края??
И как я понимаю у BODY позиционирование задано как static?

Цитата:

static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

И тогда если все-таки родительский блок от родительского элемента отличаются в других случаях, то чем именно?

Макс-Текс · 13.12.2010, 17:36

Тк родитель BODY - position: static,
то все таки, видимо, отсчет координат ведется от края окна браузера.

alex91 · 13.12.2010, 17:55

Тогда почему text располагается внизу?

Макс-Текс · 13.12.2010, 18:11

Видимо по умолчанию так.
Используйте свойства: left, top, right и bottom и располагайте как хотите.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Позиционирование элементов сайта	AspeR	HTML, CSS, JavaScript	8	05.08.2012 09:35
Неправильное позиционирование в разл. браузерах	renatam	HTML, CSS, JavaScript	0	17.01.2011 22:05
Позиционирование на экране ноутбука	Vladislav1988	HTML, CSS, JavaScript	10	12.08.2010 14:35
Позиционирование в Firefox	Vladislav1988	HTML, CSS, JavaScript	21	12.07.2010 15:52
Позиционирование <div> с помощью css	KUZEN	HTML, CSS, JavaScript	5	11.07.2006 13:41

13.12.2010, 16:47	#2
Макс-Текс	Абсолютно позиционированный элемент размещается относительно ближайшего позиционированного родительского элемента.

13.12.2010, 17:02	#4
Макс-Текс	Подставьте к стилю вашего SPAN "left: 0; top: 0;" и он будет в левом верхнем углу браузера. Если нужно изменить последовательность наслоения, то нужно применять свойство z-index. Добавлено через 1 минуту У вас родительский блок BODY для этого SPAN'а. Последний раз редактировалось Макс-Текс; 13.12.2010 в 17:02.. Причина: Добавлено сообщение

13.12.2010, 17:15	#6
Макс-Текс	Блок и элемент в данном случае - одно и то же. У SPAN'а только BODY родительский блок/элемент.

13.12.2010, 17:36	#8
Макс-Текс	Тк родитель BODY - position: static, то все таки, видимо, отсчет координат ведется от края окна браузера.

13.12.2010, 17:55	#9
alex91	Тогда почему text располагается внизу?

13.12.2010, 18:11	#10
Макс-Текс	Видимо по умолчанию так. Используйте свойства: left, top, right и bottom и располагайте как хотите.

13.12.2010, 16:43
Ссылки