How Do i position this H1 element in the top right
Question
I Want to make it so the 100 appears in the top left corner of my div, I have it aligned to the left but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
3 answers
solution1
1 2022-07-18 21:53:48
Try
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
solution2
1 ACCPTED 2022-07-18 21:56:41
The code is not clean (from a CSS perspective), however I would suggest doing display:flex; , justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.
Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300'); body { background-image: url(../assets/bg.PNG); background-repeat: no-repeat; background-size: cover; } .titan { background-image: url('../assets/titan.PNG'); width: 474px; height: 96px; display: flex; justify-content:space-between; align-items: center; } h1 { color: #31ccf3; font-family: 'Roboto', sans-serif; padding-left: 5rem; float: right; } h2 { color: white; font-family: 'Roboto', sans-serif; padding-left: 5rem; } h3 { color: #c9c9c9; font-family: 'Roboto', sans-serif; padding-left: 5rem; font-size: 1em; }
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>D2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../styles/styles.css"> </head> <body> <div class="titan"> <div> <h2>Titan</h2> <h3>Exo Male</h3> </div> <h1>100</h1> </div> <script src="../js/index.js" async defer></script> </body> </html>
solution3
0 2022-07-18 22:03:36
If i understand correctly the solution is very simple; for h1 element
position: fixed;
top: 0;
right:0;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.