Разместить элемент в правом нижнем углу - HTML и CSS

anGeee · 01.05.2011, 15:16

Не получается разместить элемент в правом нижнем углу другого элемента. Для примера набросал такой код:

html:

Код:

<html>
	<head>
		<title>Table</title>
	</head>

	<body>
		<div id="header">
			<div class="st">
				Yes yes yes
			</div>
		</div>	
	</body>
</html>

css:

Код:

#header
{
	width: 1100px;
	height: 170px;
	background-color: #ffff00;
}

.st
{
	position: relative;
	bottom: 0;
	right: 0;
           width: 100px;
	background-color: #ff0000;
}

Результат, как можно удостовериться, не оправдывает моих ожиданий. Что не так ?

Magneto · 01.05.2011, 17:34

CSS:

Код:


#header
{
    width: 1100px;
    height: 170px;
    position: relative;
    background-color: #ffff00;
}

.st
{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    background-color: #ff0000;
}

anGeee · 01.05.2011, 19:14

Спасибо, работает. Только я не совсем понимаю, почему )

MrJenika · 02.05.2011, 17:07

Цитата:

Сообщение от Magneto

CSS:

Код:


.st
{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    background-color: #ff0000;
}

а у Вас

Код:

 position: relative;

поэтому у вас и не работает.

01.05.2011, 15:16	#1
anGeee Пользователь Регистрация: 18.11.2008 Сообщений: 94	Разместить элемент в правом нижнем углу Не получается разместить элемент в правом нижнем углу другого элемента. Для примера набросал такой код: html: Код: `<html> <head> <title>Table</title> </head> <body> <div id="header"> <div class="st"> Yes yes yes </div> </div> </body> </html>` css: Код: `#header { width: 1100px; height: 170px; background-color: #ffff00; } .st { position: relative; bottom: 0; right: 0; width: 100px; background-color: #ff0000; }` Результат, как можно удостовериться, не оправдывает моих ожиданий. Что не так ? Последний раз редактировалось anGeee; 01.05.2011 в 15:19.

01.05.2011, 17:34	#2
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	CSS: Код: `#header { width: 1100px; height: 170px; position: relative; background-color: #ffff00; } .st { position: absolute; bottom: 0; right: 0; width: 100px; background-color: #ff0000; }`

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Массив в dll - как разместить массив в dll и как вызвать элемент этого массива по индексу?	Кинельски	Помощь студентам	0	23.05.2010 20:52
IT FORUM 2020 в Нижнем Новгороде	Rapid	Свободное общение	0	10.04.2010 12:42
Переставляя строки и столбцы матрицы добиться, чтобы наибольший элемент оказался в верхнем левом углу	aigulia	Помощь студентам	2	02.04.2010 19:35
в браузере при выходе в интернет в правом углу появляется порнушная реклама, Как избавиться?	Студент3000	Свободное общение	20	02.05.2009 00:54
Транспонировать квадрат,в нижнем левом углу которого находится минимальный элемент	zidan671	Помощь студентам	14	13.03.2009 22:05

01.05.2011, 19:14	#3
anGeee Пользователь Регистрация: 18.11.2008 Сообщений: 94	Спасибо, работает. Только я не совсем понимаю, почему )