Вложенность блоков и правильное позиционирование

@Omion · Регистрация: 19.05.2015

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

я создал несколько контейнеров один в другом,каждый имеет свой класс. (последовательность такая) пример :1[2.3[4[5]]] , в 5ом контейнере несколько контейнеров. у всех один класс с параметром "hidden", когда меняю класс 1го из контейнеров внутри 5го контейнера на "visibl" он отображается в другом месте. не в 5ом контейнере а просто внизу, под всем. как сделать так чтоб отображался в том же месте где был элемент с классом "hidden"?

@boilzzz · 17.06.2016, 19:43

Omion, Код в студию, как html так и css.

@Omion · 17.06.2016, 21:57 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="conteiner"><!-- основной контейнер подключён к бутстрап-->
    <!-- участок кода отвечает за левую панель -->
    <div class="cont lLeft">
   <!--тут таблица, подключение к db, скрипт, кнопочка.-->
    </div>
    <!-- участок кода отвечает за правую панель -->
<div class="cont lRight">
    <div class="conte">
        <!-- Тестовый текст -->
        <div class="nid">
            <div id="oo1" class="k alert alert-info"><b>Текст 0</b></div>
            <div id="oo2" class="k alert alert-info"><b>Текст 1</b></div>
            <div id="oo3" class="k alert alert-info"><b>Текст 2</b></div>
            <div id="oo4" class="k alert alert-info"><b>Текст 3</b></div>
        </div>
     </div>
</div>
</div>

я в CSS не то что бы новичок. я его по мере необходимости.
там цвет текста поменять или фон задать. ну криво всё кароч. сами смотрите. даже стесняюсь как-то чуть чуть))

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
.conteiner{
    height: 33%;
    background: #fff;
}
 
div.conteiner .lRight{
    float: right;
    width: 30%;
}
div.conteiner .cont{
    width: auto;
    margin: auto;
}
.conte{
    width:400px;
    float: right;
    height: 80px;
    border-radius: 20px;
}
.vis{
    width: 100%;
    height: 80px;
    border-radius: 20px;
    visibility: visible;
}
.nid{
    visibility: hidden;
}
.lLeft{
    float: left;
}

п.с принимаю советы любого рода, может сайт есть какой. как оформлять правильно.

Добавлено через 11 минут
этим скриптом меняю визибл зависимо от значения в переменной.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var o78911 = 2500;
    $(document).ready(function(){
        if(o78911 == 0){        
            $("#oo9").toggleClass("k vis");
            var timer2 = setInterval(function() {
            $("#oo9").toggleClass("vis k");
            }, 8000);
           setTimeout(function() {clearInterval(timer2);}, 10100)
           }elseif(o78911 < 0){
            $("#o11").toggleClass("k vis");
            var timer2 = setInterval(function() {
            $("#o11").toggleClass("vis k");
            }, 8000);
           } elseif(o78911 < 5000){
            $("#oo7").toggleClass("k vis");
            var timer2 = setInterval(function() {
            $("#oo7").toggleClass("vis k");
            }, 8000);
           }
                    });

Добавлено через 58 минут
я тут почитал про css так много нового узнал. ща может накручу чего.)

Добавлено через 9 минут
совсем не понимаю как получилось то что получилось. я такую ересь нагородил помоему

@boilzzz · 17.06.2016, 23:23

Omion, https://jsfiddle.net/boilzzz/9kLavwcy/1/ вот смотрите все у вас рабоает

@Omion · 17.06.2016, 23:27 **[ТС]**

Всё. всем спасибо. я понял. и переделал. во первых классы нарисовал по симпатичнее:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
.conteiner{
    width: 100%;
    height: 30%; 
}
.lRight{
    float: right;
    width: 30%;
}
.lLeft{
    float: left;
    width: 35%;
}
.lRight .conte{/*находится в lRight*/
    width:100%;
    height: 80px;
    border-radius: 20px;
    background-color: #e9e1d1;
}
.nid #oo2{
   position: relative;
   top: -90px;
   }
.nid #oo3{
   position: relative;
   top: -163px;
   }
.nid #oo4{
   position: relative;
   top: -236px;
   }
.nid #oo5{
   position: relative;
   top: -309px;
   }
.nid #oo6{
   position: relative;
   top: -380px;
   }
.nid #oo7{
   position: relative;
   top: -453px;
   }
.nid #oo8{
   position: relative;
   top: -520px;
   }
.nid #oo9{
   position: relative;
   top: -639px;
   }
.nid #o10{
   position: relative;
   top: -665px;
   }
.nid #o11{
   position: relative;
   top: -990px;
   }
.nid #o12{
   position: relative;
   top: -857px;
   }
.nid #o13{
   position: relative;
   top: -927px;
   }

во вторых произвёл наложение элементов и в третьих отредактировал размер дивов.
нет. ничего круче когда совсем разобрался сам. золотое правило для начинающих НАДО КНИГИ ЧИТАТЬ

Добавлено через 1 минуту
boilzzz, я знаю что работает. дело было в отображении. они один за одним стояли, а я его один на один наложил. не знал о существовании наложения.

Новые блоги и статьи Все статьи Все блоги /
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352

	Вложенность блоков и правильное позиционирование 17.06.2016, 19:21. Показов 1641. Ответов 4 Метки нет (Все метки) я создал несколько контейнеров один в другом,каждый имеет свой класс. (последовательность такая) пример :1[2.3[4[5]]] , в 5ом контейнере несколько контейнеров. у всех один класс с параметром "hidden", когда меняю класс 1го из контейнеров внутри 5го контейнера на "visibl" он отображается в другом месте. не в 5ом контейнере а просто внизу, под всем. как сделать так чтоб отображался в том же месте где был элемент с классом "hidden"? 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	17.06.2016, 19:43
	Omion, Код в студию, как html так и css. 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	17.06.2016, 23:23
	Omion, https://jsfiddle.net/boilzzz/9kLavwcy/1/ вот смотрите все у вас рабоает 0

Вложенность блоков и правильное позиционирование

Решение