2 replies [Last post]
Bluenose's picture
Last seen: 20 weeks 5 hours ago
Joined: 2011-10-11
Posts: 94
Points: 132


In my tags, I have

<div class="content">  
<h1 class="content__heading">Welcome To Whatever</h1>
Code to display a full screen video which works.

What I wish to do is position the date on my page - always in the same position (top-right). If I display the date with something like this:

.labelStyle {
    font: normal 14px 'trebuchet ms','News Cycle',Helvetica;
    /*color: #fff;*/
    color: #94e8e3;
    float: right;
    position: absolute;
    top: 15px;
    right: 100px;

immediately after 'body' tag, the date is not displayed at all anywhere on the screen. If I display it after 'content class' the date is displayed but imprisoned by 'content class'. The top and right positions relate not to the screen, but to the properties of 'content class':

.content {  
position: relative;  
top: 30%;  
z-index: 2;  
margin: 0 auto;  
max-width: 720px;  
text-align: center;
.content__heading {
color: #94e8e3;  
font-size: 44px;

How do I 'break out' of 'content class', please, in order to be able to display the date in the top-right of the screen?


gary.turner's picture
Last seen: 10 hours 26 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

Use fixed position

Keep in mind that generally, fixed position is obnoxious. Everybody knows how to scroll back. And date? Do you really need to constantly remind your visitor of the date? I know it's popular to fix elements in place now, but that doesn't make it any better by blocking whatever ends up scrolling under it.

<html lang="en">
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
      Test document
    <style media="screen">
    body, html {
	font: 100%/1.5 sans-serif;
	padding: 0;
    p {
	font-size: 1em;
	margin-bottom: 0;
    h1, h2, h3 {
	font-family: serif;
	margin-bottom: 0;
    h1 {
	text-align: center;
	text-transform: capitalize;
    }  /* end boiler plate */
    p#date {
	position: fixed;
	right: 6em;
	text-align: right;
	/*some browsers have been aggressive about shrink-wrapping
	   their fixed content and some very slack---this helps*/
	top: 1em;
	/*better to use ems than px for
	   responsiveness and accessibility purposes*/
      Using a fixed position date
    <p id="date">$DATE</p>
    <p>rest of content</p>

Depending on the rest of your page, you may need to set z-index on one or more elements. Don't do it unless you have to.


If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose's picture
Last seen: 20 weeks 5 hours ago
Joined: 2011-10-11
Posts: 94
Points: 132

Many thanks, Gary, and for

Many thanks, Gary, and for the comments in your code.