Меняю position:relative на absolute и вложенный блок сдвигается вниз

@Violetta1711 · Регистрация: 15.01.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте, столкнулась с такой проблемой: когда меняю у родительского блока (class="business") position: relative на absolute, один из элементов списка, который вложен в этот блок съезжает вниз, хотя он должен в него помещаться, да ведь и position никак же не может повлиять на размер блока. Может кто поймет в чем проблема, чего я не понимаю? Очень бы хотелось понять почему так происходит. заранее спасибо :)

Вот код:

HTML5
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
<div class="block">
        <div id="business">
                <h1> Заголовок заголовок заголовок </h1>
            <ul>
                <li>
                    <div class="video">
                        <img class="video_file" src="img/video-1.jpg">
                    </div>
                    Текст текст текст
                    <div class="video_data">
                        <div class="when"> 4 дня назад </div>
                        <div class="views"> <img src="img/eye.png"> 14,998 </div>
                    </div>
                </li>
 
                <li>
                    <div class="video">
                        <img class="video_file" src="img/video-2.jpg"> 
                    </div>
                                         Текст текст текст
                    <div class="video_data">
                        <div class="when"> 4 дня назад </div>
                        <div class="views"> <img src="img/eye.png"> 14,998 </div>
                    </div>
                </li>
 
                <li style="margin:0">
                    <div class="video">
                        <img class="video_file" src="img/video-3.jpg">
                    </div>
                    Текст текст текст
                    <div class="video_data">
                        <div class="when"> 4 дня назад </div>
                        <div class="views"> <img src="img/eye.png"> 14,998 </div>
                    </div>
                </li>
            </ul>
            <div style="clear:both;"></div>
        </div>
    </div>  <!--    block    -->

и стили:

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
48
49
50
51
52
53
.block{
 
    position: relative;
    width: 50%;
    left: 0; right: 0;
    margin: 0 auto 20px;
}
 
#business{
 
    position: absolute;
    margin: 0 auto;
    width: 96.875%;
}
 
#business ul li{
    position: relative;
    float: left;
    width: 30.1%;
    padding: 1%;
    margin-right: 1.85%;
    font: normal 14px MyriadPro;
}
 
.video{
 
    position: relative;
    width: 100%
}
 
.video_file{ width: 100%; }
 
.video_data{
 
    position: relative;
    height: 45px;
    color: #736d69;
    border-top: 1px solid #f6edf4;
    margin-top: 4px;
    font: normal 13px MyriadPro;
}
 
.video_data .when{
 
    position: relative;
    float: left;
}
 
.video_data .views{
 
    position: relative;
    float: right;
}

Скрины прилагаю

@cevil · 20.04.2015, 21:45

у блока с position:absolute вы выставляете ширину в % и он берет ширину от всей ширины body а не относительно блока с релейтив

@Violetta1711 · 21.04.2015, 12:04 **[ТС]**

а почему он берет ширину от всей ширины body а не от родительского блока?

@prudkiy · 21.04.2015, 14:48

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

а почему он берет ширину от всей ширины body а не от родительского блока?

business берет ширину от block. Все верно, т.к. ему задано свойство position:relative. При absolute блок <div class="block"> стает "пустым".
Собственно с кодом у Вас все верно, лично у меня ничего никуда не ползет при absolute, возможно это из того что у меня нет изображений.
Попробуйте указать

CSS
1
.video img {width: 100%}

@Violetta1711 · 21.04.2015, 20:31 **[ТС]**

у меня уже написано это свойство, все равно ничего не помогает(

@prudkiy · 21.04.2015, 20:56

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

у меня уже написано это свойство, все равно ничего не помогает

В коде я его не вижу

@Fedor92 · 21.04.2015, 22:40

Violetta1711, у Вас блоки списка великоваты по ширине - поэтому крайний блок падает... Можно задать к примеру такое правило:

CSS
1
#business ul li{width:28%}

вместо

CSS
1
#business ul li{width:30.1%}

и блок должен уместиться...

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174
	20.04.2015, 21:45
	у блока с position:absolute вы выставляете ширину в % и он берет ширину от всей ширины body а не относительно блока с релейтив 0

@Violetta1711 0 / 0 / 1 Регистрация: 15.01.2015 Сообщений: 8
	21.04.2015, 12:04 [ТС]
	а почему он берет ширину от всей ширины body а не от родительского блока? 0

@Violetta1711 0 / 0 / 1 Регистрация: 15.01.2015 Сообщений: 8
	21.04.2015, 20:31 [ТС]
	у меня уже написано это свойство, все равно ничего не помогает( 0