Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
MasterofCDM
0 / 0 / 1
Регистрация: 24.10.2013
Сообщений: 36
1

Div и position: relative

26.02.2014, 11:21. Просмотров 495. Ответов 8
Метки нет (Все метки)

Ребята, помогите разобраться новичку.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
        <div id="header_logo">
             <a class="logo" href="http://www.ranepa.ru/" target="_blank"><img id="logo" src="/img/logo.jpg"/></a>
             <a class="logo2" href="http://www.krl.ranepa.ru/">Карельский филиал</a>             
             <div class="logpass">
                 <label style="float: right;">Имя:
                     <input id="name" name="name" type="text" placeholder="Введите свое имя" autofocus required size="49">
                 </label>
                 <label style="margin-top: 3px; float: right;">Пароль:
                     <input id="psw" name="psw" type="password" placeholder="Введите пароль" autofocus required size="46">
                 </label>
                 <button class="btn_psw">Войти</button>
             </div>
     </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
* {
    margin: 0;
    padding: 0;
    outline: none;
}
 
 
body {    
    background: url(../img/bg.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #606060;
}
 
 
.logo{
    left: 8px;
    top: 50px;
    float: left;
    margin-bottom: 20px;    
}
 
.logo2{
    margin-top: 20px;
    float: right;
    color: #BF0F0F;
    font-family: 'Helios';
    font-size: 40px;
    font-weight: normal;
    line-height: 35px;
    text-transform: uppercase;
    text-decoration: none;
}
 
.logpass {
    background: gray;
    opacity: 0.7;
    width: 400px;
    height: 150px;
    position: relative;    
    left: 0;
    top: 0;
}
 
.btn_psw {
    border: 1px solid #D7D7D7;
    display: block;
    float: right;
}
пытаюсь позиционировать блок div (logpass), но его содержимое почему-то находится вне блока(
0
Миниатюры
Div и position: relative  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.02.2014, 11:21
Ответы с готовыми решениями:

Блоки relative и position внутри блока с position: relative
Всем привет! Я новичок, верстаю свой первый сайт (http://cosmetolog.cu.cc/)....

В каком случае рекомендуется использовать :margin,padding,float,position:absolute,position:relative
В каком случае рекомендуется использовать...

Как связать блоки position: absolute; и position: relative; ?
Имеется слайдер position: absolute;. Картинка слайдера уменьшается...

Не могу разобраться с position-relative и position-absolute
Дано: в блоке со свойствами position-relative помещен блок со свойствами...

position: relative; в IE
есть меню состоящие из div`ов cо свойством display:none при наведении на некую...

8
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
26.02.2014, 11:27 2
Не совсем понял, что Вы хотите получить, но

CSS
1
2
3
    position: relative;    
    left: 0;
    top: 0;
такие стили абсолютно ничего не меняют у элемента, position:relative указывает на то, что далее с помощью left и top вы передвинете элемент относительно того места, где он был бы, не указав Вы ему position. Т.е. указав top:0 и left:0 Вы его оставили на его месте по умолчанию.
0
MasterofCDM
0 / 0 / 1
Регистрация: 24.10.2013
Сообщений: 36
26.02.2014, 11:38  [ТС] 3
Я не могу понять, почему содержимое блока div (две строчки (логин/пароль) и кнопочка) находятся за пределами этого блока( И если я ставлю:
CSS
1
2
3
position: relative;
right: 0;
bottom: 0;
то ничего не меняется(

приложин скрин у которого left и top по 100px, чтобы наглядней было
0
Миниатюры
Div и position: relative  
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
26.02.2014, 11:48 4
между этим
CSS
1
2
3
position: relative;    
    left: 0;
    top: 0;
и этим
CSS
1
2
3
position: relative;
right: 0;
bottom: 0;
нету никакой разницы. Вы сначала двигаете элемент на 0 пикселей вправо и вниз. А потом на 0 пикселе влево и вверх.

лучше дайте ссылку на сайт и скажите, чего Вы хотите добиться)

Добавлено через 1 минуту
У Вас скорее всего какая то и картинок двигает всё вниз
0
MasterofCDM
0 / 0 / 1
Регистрация: 24.10.2013
Сообщений: 36
26.02.2014, 11:56  [ТС] 5
В данный момент я пытаюсь понять, почему без логотипа все работает как надо, а как только ставлю его, то содержимое из блока div выходит за его пределы, а не накладывается сверху.

И почему, если я ставлю right: 0, то блок не перемещается вправо((
0
Миниатюры
Div и position: relative  
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
26.02.2014, 11:59 6
Потому что у Вас картинка толкает всё вниз.
уберите позитион релатив. Попробуйте
0
MasterofCDM
0 / 0 / 1
Регистрация: 24.10.2013
Сообщений: 36
26.02.2014, 12:04  [ТС] 7
т.е. простым способом содержимое div'a на картинку не наложить?

Потому что у Вас картинка толкает всё вниз.
уберите позитион релатив. Попробуйте
убрал, всеравно сам div на логотипе, а содержимое под ним(
0
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
26.02.2014, 12:06 8
Содержимое на картинку наложить). как минимум поставить картинку как бэкграунд.
Можно ещё задать родительскому блоку position:relative, а блоку с пассом и логином position:absolute, тогда он будет позиционироваться относительно родителя, т.е. left:0 и top:0 поднимет его в самый верх родителя. Можно float использовать. Вариантов вообще много. А Вы думаете, у Вас читабельно будет на картинке всё это смотреться?
1
MasterofCDM
0 / 0 / 1
Регистрация: 24.10.2013
Сообщений: 36
26.02.2014, 12:13  [ТС] 9
Спасибо за помощь, этот блок мне надо запихать в правый нижний угол. А здесь я просто пытаюсь понять почему из-за картинки такие могут быть косячки, чтобы в будущем делать все правильно)

Можно ещё задать родительскому блоку position:relative, а блоку с пассом и логином position:absolute
То что я и хотел))) Все получилось. Еще раз спасибо.
0
26.02.2014, 12:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.02.2014, 12:13

Position: relative и отступ сверху
Товарищи, проясните ситуацию пожалуйста Я себе уже всю голову сломал Я делаю...

position absolute под relative
Реально ли сделать, чтобы абсолютный блок лежал под relative в таком коде? ...

Overflow: hidden и position: relative
Всем привет. Кто-то может мне объяснить проблему overflow: hidder и position:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru