Я пытаюсь разместить текстовые блоки над изображениями на странице портфолио и искал несколько решений для решения проблем абсолютного позиционирования на этом сайте, но безрезультатно.
Полагаю, у меня есть четкое понимание того, как работает позиция: absolute работает, но моя проблема в том, что мой текст не рассматривает каждое изображение как его родительское, поэтому параметры не оказывают желаемого эффекта (т.е. помещают текст вконкретное местоположение внутри изображения).
Возможно, я неправильно разместил свои контейнеры?Я в растерянности.
Вот HTML:
<div class="container-2">
<section>
<!--Page Title-->
<h1 class="title-2">Portfolio</h1>
</section>
<!--Project Image Links-->
<!--Project 1-->
<div class="img-1">
<img src="assets/images/colors.jpg"/>
<div class="hangman">
<a href="#"><h4>Hangman</h4></a>
</div>
</div>
<!--Project 2-->
<div class="img-2">
<img src="assets/images/dj.jpg"/>
<div class="rpg">
<a href="#"><h4>RPG Game</h4></a>
</div>
</div>
<!--Project 3-->
<div class="img-3">
<img src="assets/images/sunset.jpg"/>
<div class="trivia">
<a href="#"><h4>Trivia Game</h4></a>
</div>
</div>
<!--Project 4-->
<div class="img-4">
<img src="assets/images/nature.jpg"/>
<div class="rutgers">
<a href="#"><h4>Rutgers Info Widget</h4></a>
</div>
</div>
<!--Project 5-->
<div class="img-5">
<img src="assets/images/purple.jpg">
<div class="rps">
<a href="#"><h4>Rock Paper Scissors</h4></a>
</div>
</div>
</div>
И CSS:
.img-1 {
position: relative;
}
.img-1 h4 {
position: absolute;
bottom: 20px;
background-color: #4aaaa5;
color: #ffffff;
}
Вот снимок экрана с измененным текстовым блоком:делаю: снимок экрана проблемы
Редактировать:
Хорошо, я попробовал оба ваши предложения и текст (будь то
или всев итоге не соответствует img как его родителю. Я заранее извиняюсь, но, возможно, в остальной части моего CSS я что-то упускаю, что влияет на позиционирование других элементов. Вот мой CSS: html, body {
height: 100%;
}
body {
background-image: url("../images/gravel.png");
display: flex;
flex-direction: column;
overflow: auto;
clear: both;
}
/*Span of About Me page*/
.container {
flex: 1 0 auto;
width: 960px;
background-color: #ffffff;
border-color: #dddddd;
margin: auto;
float: left;
padding: 5px;
}
/*Span of Portfolio page*/
.container-2 {
position: relative;
flex: 1 0 auto;
width: 960px;
background-color: #ffffff;
border-color: #dddddd;
margin: auto;
padding: 5px;
}
/*Span on Contact Me page*/
.container-3 {
flex: 1 0 auto;
width: 800px;
background-color: #ffffff;
border-color: #dddddd;
margin: auto;
float: left;
padding: 5px;
}
/*Sticky Footer at bottom of every page*/
.footer {
flex-shrink: 0;
text-align: center;
border-top: 8px solid;
border-color: #4aaaa5;
background-color: #666666;
padding: 10px;
color: #ffffff;
}
/*About Me Title*/
.title-1 {
color: #4aaaa5;
border-bottom: 4px solid;
border-color: #cccccc;
margin: 10px;
font-size: 20px;
}
/*Portfolio Title*/
.title-2 {
color: #4aaaa5;
border-bottom: 4px solid;
border-color: #cccccc;
margin: 10px;
padding: 10px;
font-size: 30px;
}
/*Contact Title*/
.title-3 {
color: #4aaaa5;
border-bottom: 4px solid;
border-color: #cccccc;
margin: 10px;
padding: 10px;
font-size: 30px;
}
/*Bio Text on index.html*/
.bio {
color: #777777;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
width: 900px;
background-color: #ffffff;
margin: 5px;
padding: 5px;
}
/* Header at the top of every page*/
.header {
background-color: #ffffff;
border-bottom: 5px solid;
border-color: #cccccc;
font-family: Georgia, 'Times New Roman', Times, serif;
padding-left: 300px;
}
/*My name at the top of each page*/
.Name {
background-color: #4aaaa5;
color: #ffffff;
font-family: Georgia, 'Times New Roman', Times, serif;
width: 250px;
margin: 0;
padding: 20px;
float: left;
}
/*Navigation buttons at the top of the page*/
.buttons {
position: relative;
top: 20px;
right: 20px;
margin: 10px;
float: right;
font-size: 17px;
padding-right: 275px;
color: #777777;
}
/*Right now just profile picture*/
img {
margin: 5px;
padding: 0;
float: left;
width: 200px;
height: 200px;
}
/*Decoration for Navigation buttons*/
a {
text-decoration: none;
color: #777777;
}
/*Input boxes on contact.html*/
.inputs {
margin: 5px;
padding: 5px;
color: #777777;
font-family: Arial, Helvetica, sans-serif;
}
/*Name input box on contact page*/
.input-1 {
height: 20px;
width: 750px;
}
/*Email input box on contact page*/
.input-2 {
height: 20px;
width: 750px;
}
/*Message input box on contact page*/
.input-3 {
width: 750px;
height: 200px;
}
/*Submit button of contact me page*/
.submit {
position: relative;
left: 20px;
top: 20px;
background-color: #4aaaa5;
color: #ffffff;
margin: 5px;
padding: 5px;
height: 40px;
width: 100px;
font-size: 20px;
}
/*Project image links*/
.content-box img {
width: 200px;
height: auto;
}
.content-box {
position: relative;
}
.content-box h4 {
position: absolute;
top: 20px;
background-color: #4aaaa5;
color: #ffffff;
}
и HTML для этой страницы, так как их несколько: <!DOCTYPE html>
<html lang="en-us">
<head>
<title>Robert-Hardin-Portfolio</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="header">
<!--My name!-->
<h1 class="Name">Robert Hardin</h1>
<!--Navigation Tabs-->
<nav class="buttons">
<!-- Button that leads to bio-->
<a href="index.html">About</a>
|
<!--Button that leads to Portfolio-->
<a href="portfolio.html">Portfolio</a>
|
<!--Button that leads to contact information-->
<a href="contact.html">Contact</a>
</nav>
</header>
<br>
<div class="container-2">
<section>
<!--Page Title-->
<h1 class="title-2">Portfolio</h1>
</section>
<!--Project Image Links-->
<!--Project 1-->
<div class="content-box img-1">
<img src="assets/images/colors.jpg"/>
<div class="content hangman">
<a href="#"><h4>Hangman</h4></a>
</div>
</div>
<!--Project 2-->
<div class="content-box img-2">
<img src="assets/images/dj.jpg"/>
<div class="content rpg">
<a href="#"><h4>RPG Game</h4></a>
</div>
</div>
<!--Project 3-->
<div class="content-box img-3">
<img src="assets/images/sunset.jpg"/>
<div class="content trivia">
<a href="#"><h4>Trivia Game</h4></a>
</div>
</div>
<!--Project 4-->
<div class="content-box img-4">
<img src="assets/images/nature.jpg"/>
<div class="content rutgers">
<a href="#"><h4>Rutgers Info Widget</h4></a>
</div>
</div>
<!--Project 5-->
<div class="content-box img-5">
<img src="assets/images/purple.jpg">
<div class="content rps">
<a href="#"><h4>Rock Paper Scissors</h4></a>
</div>
</div>
</div>
<br><br>
<footer class="footer">Copyright © 2019 Robert Hardin</footer>