Текст над картинкой

@Froskyta · Регистрация: 27.11.2017

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

Как разместить текст над картинкой? Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="section" id="section1">
            <p class="image">
                <p class="zag">
                    Монитор
                </p>
                <img src="image/msi-27-gaming-monitor-1ms.png" alt="" height="500px">
                <p class="kiki">
                «Астана қаласындағы Ұлттық академиялық кітапхана» республикалық мемлекеттік мекемесі 2004 жылдың 23 сәуір күні № 461 ҚР Үкіметінің Қаулысымен құрылды. </br>
                Бүгінде ҚР ҰАК – бұл Кітап пен Оқуды таңдап алған адамдардың баршасы үшін есігі ашық қазіргі заманғы ақпараттық мекеме.  Оқырмандар билігінде ақпараттық және сервистік қызметтің толық жиынтығы бар: электронды каталог, Интернет пен қашықтықтағы деректер базасына қолжетімділік, виртуальды анықтамалық қызмет, құжаттарды электронды жеткізу, кітаптар, газет-журналдар, мультимедиялық басылымдардың бай топтамасы.  ҚР ҰАК-ның қорында бір жарым миллионнан астам басылым бар. Оның оқу залдары бір мезгілде 500-ден астам оқырманды қабылдайды. Ал «Мәжіліс», «Сұхбат» және «Конституция» залдарында дәрістер, конференциялар, презентациялар, көрмелер және жұмыс кездесулер өткізу үшін толық жабдықталған жағдай жасалынған.
                Бүгінде ҚР ҰАК – бұл Кітап пен Оқуды таңдап алған адамдардың баршасы үшін есігі ашық қазіргі заманғы 
            </p>
        </div>
    </div></p>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.zag{
    text-align: center;
    font-size: 25px;
    padding-top: 50px;
    font-family: Segoe UI Regular;
}
.kiki{
    width: 60%;
    margin: 0 auto;
    font-size: 20px;
    font-family: Segoe UI Light;
    text-align: justify;
}

Снизу картинка. Мне нужно, чтобы текст встал так как новый слой на этом сайте. И чтобы заданные границы не сбивались. Ибо у меня используется width и margin. И под картинкой был белый фон. Никак не могу догадаться как это делается. Как белая панель под текстом, как делает во многих сайтах. И чтобы под этой самой панелью была картинка. Полностью независима по расположению

@Dree · 27.05.2018, 00:54

CSS
1
2
3
4
5
6
7
8
9
10
.kiki{
    width: 60%;
    margin: 0 auto;
    font-size: 20px;
    font-family: Segoe UI Light;
    text-align: justify;
    position: absolute;
    top: 0;
    z-index: 3;
}

Попробуйте так!
Через margin можно отрегулировать!

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .