I am trying to place my "tweet" button next my "generate quote" button, but for some reason the css doesn't work. I tried using top: 50%, margin-top: 50%, placed it in another div under the "quote" div, targeted it with #, but it still stays in the top left corner. What can be the reason?
https://codepen.io/s4ek1389/pen/zZGNWw?editors=1100
HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<div class="main">
<div id="quote">
<h1>There is nothing either good or bad, but thinking makes it so.</h1>
<h4>William Shakespeare</h4>
</div>
<div class="containter">
<div class="row">
<button type="button", class="btn btn-primary", id="gen"> Generate Quote!
</button>
Tweet
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
CSS
.main {
background-image:url("http://wallpapercave.com/wp/mVcZwOP.jpg");
background-size:cover;
min-height: 640px;
margin: 0 auto;
position:relative;
width:100%;
max-width:1680px;
}
#quote {
text-align:center;
width:70%;
}
h1 {
position: absolute;
top: 30%;
font-size:5vw;
background-color:rgba(173, 29, 125, 0.5);
color:white;
font-family: "Comfortaa", cursive;
text-align:center;
display:block;
}
h4 {
top:60%;
font-size:3vw;
background-color:rgba(173, 29, 125, 0.5);
color:white;
font-family: "Comfortaa", cursive;
position:absolute;
display:inline-block;
}
#gen {
top:80%;
position: absolute;
left:42%;
display:inline;
}
#tw {
top:50%;
position:absolute;
margin-top:50%;
}
Instead of absolutely positioning each individual element, you can put all of this text/button content in a single element that you absolutely position, then relatively position the contents of that element relative to one another. It will make things a lot easier.
The main issue with your twitter button is that the code you put in your HTML is just a placeholder that is replaced with an iframe for the twitter button, so you're styling the wrong element. You don't want to style #tw, you want to style #twitter-widget-0, which is the ID of the rendered iframe that the twitter button creates. But if you put that code in an element like I mentioned above, you shouldn't need to style that button.
.main {
background-image: url("http://wallpapercave.com/wp/mVcZwOP.jpg");
background-size: cover;
min-height: 640px;
margin: 0 auto;
position: relative;
width: 100%;
max-width: 1680px;
}
#quote {
text-align: center;
position: absolute;
top: 30%;
left: 0;
right: 0;
}
h1 {
font-size: 5vw;
background-color: rgba(173, 29, 125, 0.5);
color: white;
font-family: "Comfortaa", cursive;
}
h4 {
font-size: 3vw;
background-color: rgba(173, 29, 125, 0.5);
color: white;
font-family: "Comfortaa", cursive;
display: inline-block;
}
#gen {
margin-right: 1em;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<div class="main">
<div id="quote">
<h1>There is nothing either good or bad, but thinking makes it so.</h1>
<h4>William Shakespeare</h4>
<div class="buttons">
<button type="button" class="btn btn-primary" id="gen"> Generate Quote!</button>
Tweet
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
hello there I'm facing now a problem with controlling an element from inside of a different element .
for example if I want to control the appearance of an element inside of footer by hovering over another element in header .
i hope you have the answer and thanks in advance
One way to do this is, for example, if you have a li with a link inside and you want to change the color of the link when the li is hovered on, you could do this:
ul li:hover a {
color: green;
}
/* only for presentation */
ul li {
width: 100px;
height: 50px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
Link
</li>
</ul>
if you wanted to affect totally random elements as you said, you can do this:
/* ----- This is all extra styling ----- */
body {
background-color: #121212;
}
.header {
position: fixed;
background-color: rgb(31, 33, 34);
width: 100%;
color: white;
font-family: arial;
text-align: center;
}
.footer {
position: absolute;
top: 90%;
background-color: rgb(31, 33, 34);
width: 100%;
color: white;
font-family: arial;
text-align: center;
}
/* ----- This is all extra styling ----- */
.header:hover + .footer {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags and what not -->
</head>
<body>
<div class="header">
<!--Header stuff here-->
<h2>My Website</h2>
</div>
<!--In this case the footer and header must be exactly next to eachother for the + to work-->
<div class="footer">
<h4>Hover on the header to change my color</h4>
</div>
<!--This could be whatever you want the page content to be-->
<main>
</main>
</body>
</html>
I'm looking for some CSS help. I am working on my church's website, and I am trying to get the mobile version of my supposedly responsive theme to resize header images. Right now the header image doesn't seem to resize, or at least not completely.
Website: http://www.rochestertrinity.com/kids.html
What I'm hoping to get is to have the header image scale to the exact width of whatever the display size is. So things would look essentially the same on desktop, but on mobile the user would see the entire header image. I've attached a mock up image of what I see now and what I'd like to see.
image of what I see vs what I'd like
I'm not a CSS expert, but I suspect the code that manages this is in one of the following snippets:
/* Tall Header Page */
.tall-header-page .banner-wrap {
display: table;
width: 100%;
min-height: 450px;
padding-top: 50px;
text-align: center;
}
.tall-header-page .banner-wrap .container {
height: 450px;
}
.tall-header-page .banner-wrap .banner h2 {
font-size: 70px;
padding-top: 65px;
}
OR
/* Banner */
.banner-wrap {
position: relative;
max-width: 100%;
height: auto;
padding: 55px 0;
box-sizing: border-box;
background: #ffffff url('default-bg.jpg') center center no-repeat;
background-size: cover;
}
.banner-wrap:before {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background: rgba(0, 0, 0, 0);
content: ' ';
}
.banner-wrap .container {
display: table;
overflow-y: hidden;
height: 100%;
}
.banner-wrap .banner {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 100px;
font-weight: normal;
line-height: 1.1em;
}
.banner-wrap .banner p {
padding-bottom: 40px;
color: #ffffff;
letter-spacing: .03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}
.banner-wrap .banner .button-wrap {
display: inline-block;
}
.banner-wrap .banner .wsite-button {
text-align: center !important;
}
.banner-wrap .banner .wsite-button .wsite-button-inner {
background: #ff8345;
color: #ffffff !important;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner {
background: #e56525;
}
I hope someone can help.
Thanks!
UPDATE 2016-04-22
tall-header.html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class='tall-header-page wsite-theme-light'>
<div class="wrapper">
<div class="paris-header">
<div class="container">
<label class="hamburger"><span></span></label>
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
</div><!-- end .container -->
</div><!-- end .header -->
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
</div>
</div>
</div>
<div class="main-wrap">
<div class="container">
<div class="content-wrap">{content}</div>
</div><!-- end container -->
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div>
<div class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
In your kids.html you have this, it overwrites your CSS-Code:
<style>
.wsite-background {background-image: url("//cdn1.editmysite.com/uploads/6/5/4/8/65485229/background-images/2036811843.jpg") !important;background-repeat: no-repeat !important;background-position: 50.00% 37.71% !important;background-size: 100% !important;background-color: transparent !important;}
body.wsite-background {background-attachment: fixed !important;}.wsite-background.wsite-custom-background{ background-size: cover !important}
</style>
Delete or Change this part of the code and it works:
.wsite-background.wsite-custom-background {
background-size: cover !important;
}
In your CSS-File you have this media query:
Explanation to media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media screen and (max-width: 992px) {
write this line of code in your media query:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% 100% !important; }
Its not perfect, an other solution whould be this, then you have to change the height of the element:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% auto !important; }
or this:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: contain !important; }
Explanation to background-size: http://www.w3schools.com/css/css3_backgrounds.asp
I have 3 divs which I want them to display at the same height left center and right but that isnt happening right now.
Proof of concept:
https://dl.dropboxusercontent.com/u/51736887/Untitled.png (must have 10 rep to post images ughh)
The problem is that the sidebars and the main content are the one bellow the other and stuck to the side not just under the navbar like I want them.
Image of what happens: https://dl.dropboxusercontent.com/u/51736887/Untitled%20-%20Copy.png
This is my current code(includes only 1 of the 2 sidebars):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h3 align="center"><img src="afterlogo.png" alt="" height="358" width="339"></h3>
<div id="nav">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Donations</li>
<li>Vote</li>
</ul>
</div>
<div class="content">
<p><b> test </b> 0000-00-00 00:00:00<br><b> test 2 </b> 0000-00-00 00:00:00<br>test3 0000-00-00 00:00:00<br>test4 0000-00-00 00:00:00<br>test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br /> </p>
</div>
<div class="sidebar"> test </div>
<div class="footer">
<br />
Test footer
<br />
</div>
</html>
and heres the css:
body {
background-image:url('../bg.png');
background-attachment: fixed;
background-position: bottom;
}
#nav a:link{
text-decoration: none;
color: #000000;
font-size: 2em;
}
#nav a:visited {
color:#000000;
}
#nav a:hover {
color: #00FF00;
}
#nav {
border-radius: 15px;
background-size: cover;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
word-spacing: 2em;
}
.nav {
text-decoration: none;
}
li {
display: inline;
}
.content {
border-radius: 15px;
background-size: cover;
/*background-image:url('../content.png');*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin-left: auto ;
margin-right: auto ;
width: 500px;
background-repeat: no-repeat;
}
.sidebar {
border-radius: 15px;
/*background-size: cover;*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: left;
overflow: hidden;
margin-left: 120px;
margin-right: auto;
width: 220px;
float: left;
}
.footer {
clear:both;
border-radius: 500px;
text-align: center;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
}
I believe you are looking to achieve equal height columns - here's an excellent writeup by Chris Coiyer detailing the different techniques you can use.
p/s: It would be good if you can include the actual HTML output of the final layout (not in separate PHP files) ;)
Edit: After having a look at your code, it seems that you are positioning the sidebar absolutely. Is there any reason why you are doing so? You could have easily floated the sidebar and the content, so they will sit side by side.
Update: First of all, you should avoid using deprecated HTML features, such as the align="center" property. You should delegate all attributes that dictate layout to your CSS file instead.
You cannot combine both float and position: absolute on the same element. They are conflicting properties, and both will take your element out of the normal document flow. What I would suggest is wrapping your content and sidebar in a common parent element, say, <main>, <section> or <div>, and them floating them.
Here's the revised markup:
<section class="main">
<div class="content">
<p>Content</p>
</div>
<div class="sidebar">test</div>
</section>
And CSS:
.main {
margin: 0 6em;
/* or you can set width using "width: ..." */
overflow: hidden; /* Prevent parent from collapsing */
}
.content, .sidebar {
background-color: rgba(76, 92, 70, 0.7);
border-radius: 15px;
float: left;
}
.content {
}
.sidebar {
width: 250px;
}
http://jsfiddle.net/2X7pv/
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon"
type="image/png"
href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>
<body>
<div id="wrapper">
<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
<div id="home" data-speed="10" data-type="background">
<div></div>
</div>
<div id="ukrainetext">
<img id="ukraine" src="images/ukraine.jpg"/>
<p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>
<div id="cornwalltext">
<img id="cornwall" src="images/cornwall.jpg"/>
<p id="cornwalltextp">Cornwall,<br>England</p>
</div>
<div id="moscowtext">
<img id="moscow" src="images/moscow.jpg"/>
<p id="moscowtextp">Moscow,<br>Russia</p>
</div>
</div>
</body>
</html>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background: #3e3e3e;
}
#wrapper {
min-width: 640px;
margin-bottom: 0;
}
#menu {
background: #5d5d5d;
font-family: "Kozuka Gothic Pro";
font-size: 20px;
font-weight: lighter;
color: white;
height: 50px;
margin: 0 auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
min-width:640px;
position: relative;
z-index:99;
}
table td {
padding-top: 13px;
}
#josh-graham {
font-size:25px;
padding-top: 6px;
padding-left: 5px;
}
#ukrainetext {
position: relative;
}
#ukrainetextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 6%;
}
#ukraine {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float: left;
}
#cornwalltext {
position: relative;
}
#cornwalltextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 25%;
}
#cornwall {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
#moscowtext {
position: relative;
}
#moscowtextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 43.5%;
}
#moscow {
height: auto;
margin: 0.3% auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/
HTML:
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>
CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
Just set the z-index in your CSS. Higher numbered elements appear above lower numbered elements. While you can just give elements contiguous whole numbers; generally, you'll want to provide large gaps between lower and higher elements in case you need to add additional elements or change the layering of elements.