Составление дивов относительной и абсолютной позиции - PullRequest
Новая
       26

Составление дивов относительной и абсолютной позиции

0 голосов
/ 13 марта 2019

У меня много проблем при попытке сделать макет.Я пытаюсь сделать так, чтобы окно перекрывало изображение, я пытаюсь использовать абсолютные / относительные позиции, но я думаю, что делаю это неправильно. вот макет

вот код, который у меня есть: 

   .trabalhos{
	position: relative;
	margin-top: 100px;
	width: 100%;
	max-width: 960px;
    }
    
    .caixa{
	position: absolute;
	left: 0%;
	top: auto;
	right: auto;
	bottom: 10%;
	overflow: visible;
	width: 30%;
	height: auto;
	padding: 25px;
	border-radius: 10px;
	background-color: #333;
	color: white;
    }
    
    #trabalhos-img-right{
	float: right;
    }

    #trabalhos-img-left{
	float: left;
    }

    #esquerda{
	text-align: right;
    }

    #direita{
	text-align: left;
	right: 0%;
	left: auto;
    }
<div class="section-trabalhos">
		<div class="container">
			<h1>blablablablabla</h1>

			<div class="trabalhos">
				<div><img id="trabalhos-img-right" src="img-01.png"></div>
				<div class="caixa" id="esquerda">
					<h2>Lorem ipsum</h2>
					<p>blablabla</p>
				</div>
			</div>

			<div class="trabalhos trabalhos_2">
				<div><img id="trabalhos-img-left" src="img-01.png"></div>
				<div class="caixa" id="direita">
					<h2>Lorem ipsum</h2>
					<p>blablabla</p>
				</div>
			</div>

Мне придется сделать 8 из них, как лучше?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Я надеюсь, что я решил эту проблему 

<html>
<head>



<style>

    .trabalhos{
        width:100%;
        max-width: 960px;
        height: 60%;
        margin-top: 100px;
        position: relative;
    }

    .img{
        width:80%;
        height: 100%; /*Do not change it*/
    }

    .caixa{
        position: absolute;
        bottom:10%;
        overflow: visible;
        width: 30%;
        height: auto;
        padding: 25px;
        border-radius: 10px;
        background-color: #333;
        color: white;
    }




#trabalhos-img-right{
    float: right;
}

#trabalhos-img-left{
    float: left;
}

#esquerda{
    text-align: right;
    left: 0px    
}

#direita{
    text-align: left;
    right: 0px;
}  

    #trabalhos-img{
        width: 100%; /*Do not change it*/
        height: 100%; /*Do not change it*/
    }        


</style>

</head>



<body>

    <div class="trabalhos">

        <div id="trabalhos-img-right" class="img">
          <img id="trabalhos-img" src="img-01.png" /></div>
        <div class="caixa" id="esquerda">
            <h2>Lorem ipsum</h2>
            <p>blablabla</p>
        </div>
    </div>

     <div class="trabalhos">

        <div id="trabalhos-img-left" class="img">
          <img id="trabalhos-img" src="img-01.png" /></div>
        <div class="caixa" id="direita">
            <h2>Lorem ipsum</h2>
            <p>blablabla</p>
        </div>
    </div>


</body>

0 голосов
/ 13 марта 2019

Этот CodePen может быть решением.Просто замените элемент svg в коде html и css своим изображением, и все готово.

Кроме того, этот веб-сайт может помочь вам понять свойство position.

HTML 

<div class="container">
  <svg width="400" height="110">
    <rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
  </svg>
  <div class="description">
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </div>
</div>

<div class="containersecond">
  <svg width="400" height="110">
    <rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
  </svg>
  <div class="description">
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </div>
</div>

CSS 

svg {
  position: relative;
  left: 30px;
}

.description {
  background-color: red;
  width: 300px;
  position: absolute;
  top: 70px;
}

.containersecond {
  position: absolute;
  top: 300px;
}
...