Jump to content
  • 0

CSS: неверное приклеивание к границам экрана при position:relative;

sergey_lans

Asked by sergey_lans,

 Share

Question

sergey_lans Explorer

sergey_lans

Posted
Posted (edited)

Здраствуйте, я начинающий верстальщик, и у меня возникла проблема. Вообще, я верстаю макет, но, для того, чтобы вам не пришлось разбираться в тоннах кода, минимизирую его.

Проблема: При использовании такого кода:

#foot1 {
	top: 0;
	background: #1b5790;
	position: relative;
	width: 985px;
	height: 46px;
	margin:0 auto 0 auto;
	}

Не происходит прикрепления синей полоски к границам экрана.

При изменении значения position: с relative; на absolute; все приходит в норму - полоска прикрепляется к верней части экрана.

Когда     position: absolute; это выглядит так.

Когда    position: relative; это выглядит так. (из-за яндексной рекламы появляются символы "п»ї", этого нет на локале, но пробел все равно есть)

Проблема в том, что я не могу поставить absolute, потому что из-за него, при увеличении экрана элементы будут позиционироваться не так, как надо (сдвигаться влево).

Что делать?

Проблема решена!

* {
margin: 0;
padding: 0;
}

Edited by sergey_lans
Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0
homm Explorer

homm

Posted
Posted
CSS: неверное приклеивание к границам экрана при position:relative;

не ясно с чего вы взяли, что при relative можно что-то куда-то приклеить. relative переводится как относительно. Т.е. вы задали, что верх будет сдвинут на 0 пикселей относительно начального, т.е. не изменится.

Link to comment
Share on other sites
  • 0
VooFoo Explorer

VooFoo

Posted
Posted (edited)

значение relative указывает положение относительно указанного места блока

absolute - относительно всего окна браузера

в приведенном примере тэг <div> стоит внутри <body>

<body> имеет внешний отступ, поэтому со всех сторон отступ

напишите:

body {
margin: 0;
}

и будет так как хотите (в приведенных примерах)!

Edited by VooFoo
Link to comment
Share on other sites
  • 0
Nekromancer Explorer

Nekromancer

Posted
Posted (edited)

а тут не тоже самое что ли написали?

absolute - относительно всего окна браузера

относительно родительного элемента, точнее абсолютное позиционирование по отношению к родительному элементу...

Edited by Nekromancer
Link to comment
Share on other sites
  • 0
VooFoo Explorer

VooFoo

Posted
Posted (edited)
Опять мимо.

absolute:

Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

:lol: не мимо

Edited by VooFoo
Link to comment
Share on other sites
  • 0
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted (edited)

а теперь сам проверь вот это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
#id1
{
position:relative;
margin:100px;
background-color:#f00;
height:500px;
width:500px;
}
#id2
{
position:absolute;
left:40px;
top:30px;
height:50px;
width:50px;
background-color:#000;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">
   
</div>
</div>
</body>
</html>

Edited by Victor Ananiev
Link to comment
Share on other sites
  • 0
homm Explorer

homm

Posted
Posted
absolute:

Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

:lol: не мимо

я что-то не понял. Ты сейчас написал какие-то слава от себя и считаешь это докозательнством?

Я бог!! Му-ха-ха!

Видишшь, я бог :huh: Будешь спорить — еще раз себя процетирую.

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

VooFoo, приведенная цитата действительно только в том случае, если position: absolute применяется к элементу, у родителя которого position задан как static. В других случаях позиционирование работает иначе.

Link to comment
Share on other sites
  • 0
homm Explorer

homm

Posted
Posted
VooFoo, приведенная цитата действительно только в том случае, если position: absolute применяется к элементу, у родителя которого position задан как static. В других случаях позиционирование работает иначе.

Только нужно это написать не здесь, а на соответствующей странице.

Link to comment
Share on other sites
  • 0
sergey_lans Explorer

sergey_lans

Posted
  • Author
Posted
Давай я тебе помогу с работой? Где работаешь и сколько платят?

Хех :lol:

Ну вот тебе задание:

Надо, чтобы меню на этом сайте - http://aljona-plus-lans.narod.ru/training/r06/index.html

Было такое же, как на этом: http://www.r06.ru/page/#

Сделаешь, скину 50р))

Link to comment
Share on other sites
  • 0
VooFoo Explorer

VooFoo

Posted
Posted
Хех :lol:

Ну вот тебе задание:

Надо, чтобы меню на этом сайте - http://aljona-plus-lans.narod.ru/training/r06/index.html

Было такое же, как на этом: http://www.r06.ru/page/#

Сделаешь, скину 50р))

нее..

работай сам по таким расценкам :huh:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept