как сделать так ,чтоб текст не залазил на картинку
как сделать так ,чтоб текст не залазил на картинку ( отмечен голубым ) ,у картинки создан position absolute,но его убрать нельзя,ибо уйдет другой текст.Надо чтоб как то этот текст был внизу страницы,как новый отдел можно сказать,чтоб задать еще одну картинку на фон
* {
margin: 0;
padding: 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-decoration: none;
}
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.navbar {
display: flex;
/* margin-left: 350px; */
align-items: center;
justify-content: center;
background: rgb(0, 0, 0);
}
.logo {
padding: 0.9em;
color: peachpuff;
}
.navlist {
display: flex;
list-style: none;
}
.navlist a {
display: block;
color: peachpuff;
padding: 1.5em;
transition: 0.8s;
}
.navlist a:hover {
transition: 0.8s;
color: rgb(206, 197, 197);
font-size: 17px;
}
.navlist a span
{
position: relative;
}
.navlist a span::before
{
transition: width .9s;
content: "";
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: currentColor;
}
.navlist a:hover span::before
{
width: 100%;
}
.num {
display: block;
position: absolute;
margin-left: 730px;
padding: 1.5em;
color: peachpuff;
font-size: 18px;
}
.contacts a {
color: peachpuff;
transition: 0.8s;
}
.contacts {
display: flex;
transition: 0.8s;
font-size: 19px;
margin-left: 210px;
}
.instcont {
transition: 0.8s;
display: block;
position: relative;
}
.vkcont, .whatsappcont {
margin-left: 10px;
transition: 0.8s;
}
.vkcont a:hover {
font-size: 27px;
transition: 0.8s;
color: rgb(206, 197, 197);
}
.instcont a:hover {
font-size: 27px;
transition: 0.8s;
color: rgb(206, 197, 197);
}
.whatsappcont a:hover {
transition: 0.8s;
font-size: 27px;
color: rgb(206, 197, 197);
}
.coverinmg {
position: ;
}
.coverimg img {
position: absolute;
/* width: 1920px;
height: 965px; */
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
z-index: -1;
}
.headtextcover {
font-size: 50px;
font-weight: 300;
}
.maindesigncont, .buttonform {
display: flex;
align-items: center;
justify-content: center;
}
.maindesigncont {
margin-top: 4%;
}
.designcurtaincover {
background: rgba(0, 0, 0, 0.205);
background-size: 100px 20px;
padding: 2em;
word-wrap: break-word;
text-align: justify;
font-size: 16px;
border-radius: 1px;
font-weight: 300;
font-size: 18px;
color: rgb(252, 210, 173);
}
.buttonform1 {
border: 1px solid rgba(252, 252, 250, 0);
background-color: burlywood;
text-decoration: none;
border-radius: 15px;
padding: 0.5em;
transition: 0.8s;
font-size: 15px;
}
.buttonform1 a {
color: black;
transition: 0.8s;
}
.buttonform1:hover {
background-color: rgb(0, 0, 0);
transition: 0.8s;
color: peachpuff;
transition: 0.8s;
cursor: pointer;
}
.buttonform1:hover .tchildbuttonform a {
color: peachpuff;
transition: 0.8s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="static/styles/css/mainpage.css">
<link href="/static/styles/fontawesome/fontawesomecss/fontawesome.css" rel="stylesheet">
<link href="/static/styles/fontawesome/fontawesomecss/brands.css" rel="stylesheet">
<link href="/static/styles/fontawesome/fontawesomecss/solid.css" rel="stylesheet">
<body>
<div class="navbar">
<div class="logo">
<h1>CURTAINS</h1>
</div>
<ul class="navlist" >
<li><a href=""><span>О нас</span></a></li>
<li><a href=""><span>Услуги</span></a></li>
<li><a href=""><span>Материалы</span></a></li>
<li><a href=""><span>Наши работы</span></a></li>
<li><a href=""><span>Отзывы</span></a></li>
</ul>
<div class="num">
<span>+8 987 626 99 70</span>
</div>
<div class="socmedia">
<div class="contacts">
<div class="instcont">
<a href="">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
<div class="vkcont">
<a href="">
<i class="fa-brands fa-vk"></i>
</a>
</div>
<div class="whatsappcont">
<a href="">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
</div>
</div>
</div>
<div class="cover">
<div class="coverimg">
<img src="static/images/sinitta-leunen-38agrOgtKT0-unsplash.jpg" alt="">
</div>
<div class="maindesigncont">
<div class="designcurtaincover">
<p class="headtextcover">Дизайнер по шторам</p>
<br>
<p>Дизайн штор - это не только прекрасное украшение интерьера,
<br>но и способ создания атмосферы уюта и комфорта в доме.<br>
Важно учитывать не только эстетику, но и функциональность <br>
штор - они должны защищать от солнца, шума и посторонних глаз.</p>
<br>
<p>Для оформления окон можно использовать карнизы, аксессуары для штор,
<br>а так же их разные виды: открытые шторы, рулонные шторы и др.<br>
Каждый тип штор имеет свои особенности и преимущества, и
<br>правильный выбор поможет добиться желаемого результата.</p>
<br>
<p>Наша компания предлагает высококачественные шторы и
<br>уникальные дизайнерские решения для каждого клиента.<br>
Мы поможем подобрать идеальный вариант для вашего дома или офиса,
<br> установим карнизы и произведем установку штор.</p>
<br>
<p>Кроме того, наша компания гарантирует доступные
<br> цены и скидки на все виды штор. <br>
Мы работаем только с качественными материалами и
<br> обеспечиваем гарантию на все продукты.</p>
<br>
<p>Нужно купить шторы? Воспользуйтесь нашими услугами <br>
и получите красивые, функциональные шторы по выгодной цене!<br>
Наши специалисты всегда готовы помочь вам подобрать идеальные шторы <br>
в соответствии со стилем и функциональностью помещения.</p>
<br>
<div class="buttonform">
<div class="childbuttonform">
<form action="https://youtube" target="_blank">
<button class="buttonform1"><span>Оставить заявку</span></button>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="secondpage">
<div class="sptext">
<span>Что нужно учитывать при выборе ткани</span>
</div>
</div>
</body>
</html>Источник: Stack Overflow на русском