Position:absolute

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Posted by Andrew on Stack Overflow See other posts from Stack Overflow or by Andrew
Published on 2011-02-01T02:11:19Z Indexed on 2011/11/30 17:50 UTC
Read the original article Hit count: 508

Filed under:

I have I have a div called logo. I want the logo to be on top of other areas and to overlap into the the preface top of a drupal site, the logo currently sits in the header area.

I looked up position absolute and I think that what I need to use but when I use position absolute the logo disappears, I can see it if I use position fixed, relative etc.

I thought the logo was being hidden because I was not using a z-index but even with that I cant see the logo.

What am I doing wrong?

#logo {
 position: absolute;
 top: 30px; /* 30 pixels from the top of the page */
 left: 80px; /* 80 pixels from the left hand side */
z-index:1099;
border: 1px solid red; /* So we can see what is happening */
}

Also does anyone know of a really good free online css course?

Here is some additional information, namely the CSS and the page.tpl.php:

<?php
// $Id: page.tpl.php,v 1.1.2.5 2010/04/08 07:02:59 sociotech Exp $
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $setting_styles; ?>
  <!--[if IE 8]>
  <?php print $ie8_styles; ?>
  <![endif]-->
  <!--[if IE 7]>
  <?php print $ie7_styles; ?>
  <![endif]-->
  <!--[if lte IE 6]>
  <?php print $ie6_styles; ?>
  <![endif]-->
  <?php print $local_styles; ?>
  <?php print $scripts; ?>
</head>

<body id="<?php print $body_id; ?>" class="<?php print $body_classes; ?>">
  <div id="page" class="page">
    <div id="page-inner" class="page-inner">
      <div id="skip">
        <a href="#main-content-area"><?php print t('Skip to Main Content Area'); ?></a>
      </div>

      <!-- header-top row: width = grid_width -->
      <?php print theme('grid_row', $header_top, 'header-top', 'full-width', $grid_width); ?>

      <!-- header-group row: width = grid_width -->
      <div id="header-group-wrapper" class="header-group-wrapper full-width">
        <div id="header-group" class="header-group row <?php print $grid_width; ?>">
          <div id="header-group-inner" class="header-group-inner inner clearfix">
            <?php print theme('grid_block', theme('links', $secondary_links), 'secondary-menu'); ?>
            <?php print theme('grid_block', $search_box, 'search-box'); ?>

            <?php if ($logo || $site_name || $site_slogan): ?>
            <div id="header-site-info" class="header-site-info block">
              <div id="header-site-info-inner" class="header-site-info-inner inner">
                <?php if ($logo): ?>
                <div id="logo">
                  <a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
                </div>
                <?php endif; ?>
                <?php if ($site_name || $site_slogan): ?>
                <div id="site-name-wrapper" class="clearfix">
                  <?php if ($site_name): ?>
                  <span id="site-name"><a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a></span>
                  <?php endif; ?>
                  <?php if ($site_slogan): ?>
                  <span id="slogan"><?php print $site_slogan; ?></span>
                  <?php endif; ?>
                </div><!-- /site-name-wrapper -->
                <?php endif; ?>
              </div><!-- /header-site-info-inner -->
            </div><!-- /header-site-info -->
            <?php endif; ?>

            <?php print $header; ?>
            <?php print theme('grid_block', $primary_links_tree, 'primary-menu'); ?>
          </div><!-- /header-group-inner -->
        </div><!-- /header-group -->
      </div><!-- /header-group-wrapper -->

      <!-- preface-top row: width = grid_width -->
      <?php print theme('grid_row', $preface_top, 'preface-top', 'full-width', $grid_width); ?>

      <!-- main row: width = grid_width -->
<div id="main-wrapper" class="main-wrapper full-width<?php if ($is_front) { print ' front'; } ?>">        
<div id="main" class="main row <?php print $grid_width; ?>">
          <div id="main-inner" class="main-inner inner clearfix">
            <?php print theme('grid_row', $sidebar_first, 'sidebar-first', 'nested', $sidebar_first_width); ?>

            <!-- main group: width = grid_width - sidebar_first_width -->
            <div id="main-group" class="main-group row nested <?php print $main_group_width; ?>">
              <div id="main-group-inner" class="main-group-inner inner">
                <?php print theme('grid_row', $preface_bottom, 'preface-bottom', 'nested'); ?>

                <div id="main-content" class="main-content row nested">
                  <div id="main-content-inner" class="main-content-inner inner">
                    <!-- content group: width = grid_width - (sidebar_first_width + sidebar_last_width) -->
                    <div id="content-group" class="content-group row nested <?php print $content_group_width; ?>">
                      <div id="content-group-inner" class="content-group-inner inner">
                        <?php print theme('grid_block', $breadcrumb, 'breadcrumbs'); ?>

                        <?php if ($content_top || $help || $messages): ?>
                        <div id="content-top" class="content-top row nested">
                          <div id="content-top-inner" class="content-top-inner inner">
                            <?php print theme('grid_block', $help, 'content-help'); ?>
                            <?php print theme('grid_block', $messages, 'content-messages'); ?>
                            <?php print $content_top; ?>
                          </div><!-- /content-top-inner -->
                        </div><!-- /content-top -->
                        <?php endif; ?>

                        <div id="content-region" class="content-region row nested">
                          <div id="content-region-inner" class="content-region-inner inner">
                            <a name="main-content-area" id="main-content-area"></a>
                            <?php print theme('grid_block', $tabs, 'content-tabs'); ?>
                            <div id="content-inner" class="content-inner block">
                              <div id="content-inner-inner" class="content-inner-inner inner">
                                <?php if ($title): ?>
                                <h1 class="title"><?php print $title; ?></h1>
                                <?php endif; ?>
                                <?php if ($content): ?>
                                <div id="content-content" class="content-content">
                                  <?php print $content; ?>
                                  <?php print $feed_icons; ?>
                                </div><!-- /content-content -->
                                <?php endif; ?>
                              </div><!-- /content-inner-inner -->
                            </div><!-- /content-inner -->
                          </div><!-- /content-region-inner -->
                        </div><!-- /content-region -->

                        <?php print theme('grid_row', $content_bottom, 'content-bottom', 'nested'); ?>
                      </div><!-- /content-group-inner -->
                    </div><!-- /content-group -->

                    <?php print theme('grid_row', $sidebar_last, 'sidebar-last', 'nested', $sidebar_last_width); ?>
                  </div><!-- /main-content-inner -->
                </div><!-- /main-content -->

                <?php print theme('grid_row', $postscript_top, 'postscript-top', 'nested'); ?>
              </div><!-- /main-group-inner -->
            </div><!-- /main-group -->
          </div><!-- /main-inner -->
        </div><!-- /main -->
      </div><!-- /main-wrapper -->

      <!-- postscript-bottom row: width = grid_width -->
      <?php print theme('grid_row', $postscript_bottom, 'postscript-bottom', 'full-width', $grid_width); ?>

      <!-- footer row: width = grid_width -->
      <?php print theme('grid_row', $footer, 'footer', 'full-width', $grid_width); ?>

      <!-- footer-message row: width = grid_width -->
      <div id="footer-message-wrapper" class="footer-message-wrapper full-width">
        <div id="footer-message" class="footer-message row <?php print $grid_width; ?>">
          <div id="footer-message-inner" class="footer-message-inner inner clearfix">
            <?php print theme('grid_block', $footer_message, 'footer-message-text'); ?>
          </div><!-- /footer-message-inner -->
        </div><!-- /footer-message -->
      </div><!-- /footer-message-wrapper -->

    </div><!-- /page-inner -->
  </div><!-- /page -->
  <?php print $closure; ?>
</body>
</html>

CSS

/* $Id: style.css,v 1.1.2.11 2010/07/02 22:11:04 sociotech Exp $ */

/* Margin, Padding, Border Resets
-------------------------------------------------------------- */
html, body, div, span, p,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, input, textarea {
  margin: 0;
  padding: 0;
}

img, abbr, acronym {
  border: 0;
}


/* HTML Elements
-------------------------------------------------------------- */
p {
  margin: 1em 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em 0;
}

h1 {
color: white !important; 
text-shadow: black !important;
}

ul, ol, dd {
  margin-bottom: 1.5em;
  margin-left: 2em; /* LTR */
}

li ul, li ol {
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

a:link,
a:visited {
}

a:hover,
a:focus,
a:active {
  text-decoration: underline;
}

blockquote {
}

hr {
  height: 1px;
  border: 1px solid gray;
}

/* tables */
table {
  border-spacing: 0;
  width: 100%;
}

tr.even td,
tr.odd td {
  background-color: #FFFFFF;
  border: 1px solid #dbdbdb;
}

caption {
  text-align: left;
}

th {
  margin: 0;
  padding: 0 10px 0 0;
}

th.active img {
  display: inline;
}

thead th {
  padding-right: 10px;
}

td {
  margin: 0;
  padding: 3px;
}

/* Remove grid block styles from Drupal's table ".block" class */
td.block {
  border: none;
  float: none;
  margin: 0;
}

/* Maintain light background/dark text on dragged table rows */
tr.drag td,
tr.drag-previous td {
  background: #FFFFDD;
  color: #000;
}


/* Accessibility
/-------------------------------------------------------------- */
/* skip-link to main content, hide offscreen */
#skip a,
#skip a:hover,
#skip a:visited {
  height: 1px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  top: -500px;
  width: 1px;
}

/* make skip link visible when selected */
#skip a:active,
#skip a:focus {
  background-color: #fff;
  color: #000;
  height: auto;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  width: auto;
  z-index: 99;
}

#skip a:hover {
  text-decoration: none;
}


/* Helper Classes
/-------------------------------------------------------------- */
.hide {
  display: none;
  visibility: hidden;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

/* clear floats after an element */
/* (also in ie6-fixes.css, ie7-fixes.css) */
.clearfix:after,
.clearfix .inner:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  overflow: auto;
  visibility: hidden;
}


/* Grid Layout Basics (specifics in 'gridnn_x.css')
-------------------------------------------------------------- */
/* center page and full rows: override this for left-aligned page */
.page,
.row {
  margin: 0 auto;
}

/* fix layout/background display on floated elements */
.row,
.nested,
.block {
  overflow: hidden;
}

/* full-width row wrapper */
div.full-width {
  width: 100%;
}

/* float, un-center & expand nested rows */
.nested {
  float: left; /* LTR */
  margin: 0;
  width: 100%;
}

/* allow Superfish menus to overflow */
#sidebar-first.nested,
#sidebar-last.nested,
div.superfish {
  overflow: visible;
}

/* sidebar layouts */
.sidebars-both-first .content-group {
  float: right; /* LTR */
}

.sidebars-both-last .sidebar-first {
  float: right; /* LTR */
}

/* Grid Mask Overlay
-------------------------------------------------------------- */
#grid-mask-overlay {
  display: none;
  left: 0;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 997;
}

#grid-mask-overlay .row {
  margin: 0 auto;
}

#grid-mask-overlay .block .inner {
  background-color: #e3fffc;
  outline: none;
}

.grid-mask #grid-mask-overlay {
  display: block;
}

.grid-mask .block {
  overflow: visible;
}

.grid-mask .block .inner {
  outline: #f00 dashed 1px;
}

#grid-mask-toggle {
  background-color: #777;
  border: 2px outset #fff;
  color: #fff;
  cursor: pointer;
  font-variant: small-caps;
  font-weight: normal;
  left: 0;
  -moz-border-radius: 5px;
  padding: 0 5px 2px 5px;
  position: absolute;
  text-align: center;
  top: 22px;
  -webkit-border-radius: 5px;
  z-index: 998;
}

#grid-mask-toggle.grid-on {
  border-style: inset;
  font-weight: bold;
}


/* Site Info
-------------------------------------------------------------- */
#header-site-info {
  width: auto;
}

#site-name-wrapper {
  float: left;   /* LTR */
}

#site-name,
#slogan {
  display: block;
}

#site-name a:link,
#site-name a:visited,
#site-name a:hover,
#site-name a:active {
  text-decoration: none;
}

#site-name a {
  outline: 0;
}


/* Regions
-------------------------------------------------------------- */

/* Header Regions
-------------------------------------------------------------- */
#header-group {
  overflow: visible;
}

/* Content Regions (Main)
-------------------------------------------------------------- */
.node-bottom {
  margin: 1.5em 0 0 0;
}

/*  Clear floats on regions
-------------------------------------------------------------- */
#header-top-wrapper,
#header-group-wrapper,
#preface-top-wrapper,
#main-wrapper,
#preface-bottom,
#content-top,
#content-region,
#content-bottom,
#postscript-top,
#postscript-bottom-wrapper,
#footer-wrapper,
#footer-message-wrapper {
  clear: both;
}


/* Drupal Core
/-------------------------------------------------------------- */

/* Lists
/-------------------------------------------------------------- */
.item-list ul li {
  margin: 0;
}

.block ul,
.block ol {
  margin-left: 2em; /* LTR */
  padding: 0;
}

.content-inner ul,
.content-inner ol {
  margin-bottom: 1.5em;
}

.content-inner li ul,
.content-inner li ol {
  margin-bottom: 0;
}

.block ul.links {
  margin-left: 0; /* LTR */
}

/* Menus
/-------------------------------------------------------------- */
ul.menu li,
ul.links li {
  margin: 0;
  padding: 0;
}

/* Primary Menu
/-------------------------------------------------------------- */
/* use ID to override overflow: hidden for .block, dropdowns should always be visible */
#primary-menu {
  overflow: visible;
}

/* remove left margin from primary menu list */
#primary-menu.block ul {
  margin-left: 0; /* LTR */
}

/* remove bullets, float left */
.primary-menu ul li {
  float: left; /* LTR */
  list-style: none;
  position: relative;
}

/* style links, and unlinked parent items (via Special Menu Items module) */
.primary-menu ul li a,
.primary-menu ul li .nolink {
  display: block;
  padding: 0.75em 1em;
  text-decoration: none;
}

/* Add cursor style for unlinked parent menu items */
.primary-menu ul li .nolink {
  cursor: default;
}

/* remove outline */
.primary-menu ul li:hover,
.primary-menu ul li.sfHover,
.primary-menu ul a:focus,
.primary-menu ul a:hover,
.primary-menu ul a:active {
  outline: 0;
}

/* Secondary Menu
/-------------------------------------------------------------- */
.secondary-menu-inner ul.links {
  margin-left: 0; /* LTR */
}


/* Skinr styles
/-------------------------------------------------------------- */

/* Skinr selectable helper classes */
.fusion-clear {
  clear: both;
}

div.fusion-right {
  float: right; /* LTR */
}

div.fusion-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.fusion-center-content .inner {
  text-align: center;
}

.fusion-center-content .inner ul.menu {
  display: inline-block;
  text-align: center;
}

/* required to override drupal core */
.fusion-center-content #user-login-form {
  text-align: center;
}

.fusion-right-content .inner {
  text-align: right; /* LTR */
}

/* required to override drupal core */
.fusion-right-content #user-login-form {
  text-align: right; /* LTR */
}

/* Large, bold callout text style */
.fusion-callout .inner {
  font-weight: bold;
}

/* Extra padding on block */
.fusion-padding .inner {
  padding: 30px;
}

/* Adds 1px border and padding */
.fusion-border .inner {
  border-width: 1px;
  border-style: solid;
  padding: 10px;
}

/* Single line menu with separators */
.fusion-inline-menu .inner ul.menu {
  margin-left: 0; /* LTR */
}

.fusion-inline-menu .inner ul.menu li {
  border-right-style: solid;
  border-right-width: 1px;
  display: inline;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.fusion-inline-menu .inner ul.menu li a {
  padding: 0 8px 0 5px; /* LTR */
}

.fusion-inline-menu .inner ul li.last {
  border: none;
}

/* Hide second level (and beyond) menu items */
.fusion-inline-menu .inner ul li.expanded ul {
  display: none;
}

/* Multi-column menu style with bolded top level menu items */
.fusion-multicol-menu .inner ul {
  margin-left: 0; /* LTR */
  text-align: left; /* LTR */
}

.fusion-multicol-menu .inner ul li {
  border-right: none;
  display: block;
  font-weight: bold;
}

.fusion-multicol-menu .inner ul li.last {
  border-right: none;
}

.fusion-multicol-menu .inner ul li.last a {
  padding-right: 0; /* LTR */
}

.fusion-multicol-menu .inner ul li.expanded,
.fusion-multicol-menu .inner ul li.leaf {
  float: left; /* LTR */
  list-style-image: none;
  margin-left: 50px; /* LTR */
}

.fusion-multicol-menu .inner ul.menu li.first {
  margin-left: 0; /* LTR */
}

.fusion-multicol-menu .inner ul li.expanded li.leaf {
  float: none;
  margin-left: 0; /* LTR */
}

.fusion-multicol-menu .inner ul li.expanded ul {
  display: block;
  margin-left: 0; /* LTR */
}

.fusion-multicol-menu .inner ul li.expanded ul li {
  border: none;
  margin-left: 0; /* LTR */
  text-align: left; /* LTR */
}

.fusion-multicol-menu .inner ul.menu li ul.menu li {
  font-weight: normal;
}

/* Split list across multiple columns */
.fusion-2-col-list .inner .item-list ul li,
.fusion-2-col-list .inner ul.menu li {
  float: left; /* LTR */
  width: 50%;
}

.fusion-3-col-list .inner .item-list ul li,
.fusion-3-col-list .inner ul.menu li {
  float: left; /* LTR */
  width: 33%;
}

.fusion-2-col-list .inner .item-list ul.pager li,
.fusion-3-col-list .inner .item-list ul.pager li {
  float: none;
  width: auto;
}

/* List with bottom border
    Fixes a common issue when list items have bottom borders and appear to be
    doubled when nested lists end and begin. This removes the extra border-bottom
 */
.fusion-list-bottom-border .inner ul li {
  list-style: none;
  list-style-type: none;
  list-style-image: none;
}

.fusion-list-bottom-border .inner ul li,
.fusion-list-bottom-border .view-content div.views-row {
  padding: 0 0 0 10px; /* LTR */
  border-bottom-style: solid;
  border-bottom-width: 1px;
  line-height: 216.7%; /* 26px */
}

.fusion-list-bottom-border .inner ul {
  margin: 0;
}

.fusion-list-bottom-border .inner ul li ul {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.fusion-list-bottom-border .inner ul li ul li.last {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: -1px;
  margin-top: -1px;
}

#views_slideshow_singleframe_pager_slideshow-page_2 .pager-item {
display:block;
}

#views_slideshow_singleframe_pager_slideshow-page_2 {
position:absolute;
right:0;
top:0;
}

#header-group-wrapper {
 background: none;
}

#page {
background-color:#F3F3F3;
background-image:url('/sites/all/themes/fusion/fusion_core/images/runswithgradient.jpg');
background-repeat:no-repeat;
background-attachment: fixed;
width: auto;
}

#views_slideshow_singleframe_pager_slideshow-page_2 div a img {
top:0px;
height:60px;
width:80px;
padding-right:10px;
padding-bottom:19px;
}

#mycontent{
width: 720px;
}

.product-body {
    -moz-border-radius: 4px 4px 4px 4px;
    margin: 0 0 20px;
    overflow: hidden;
    padding: 20px;
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #000000;
    border-style:solid;
    border-width:thin;
     color:#000000;  
}

#product-details {
    background: none repeat scroll 0 0 #F7F7F7 !important;
    border: 1px solid #000000 !important;
    color: #8E8E8E;
}

#logo {
 position: relative;
 top: 30px; /* 30 pixels from the top of the page */
 left: 80px; /* 80 pixels from the left hand side */
z-index:1099;
border: 1px solid red; /* So we can see what is happening */
}

#breadcrumbs-inner {
    background: none;
    border-color: transparent;
    border-style: none;
}

#block-views-new_products-block_1{
height:200px;
}

/* List with no bullet and extra padding
    This is a common style for menus, which removes the bullet and adds more
    vertical padding for a simple list style
 */
.fusion-list-vertical-spacing .inner ul,
.fusion-list-vertical-spacing div.views-row-first {
  margin-left: 0;
  margin-top: 10px;
}

.fusion-list-vertical-spacing .inner ul li,
.fusion-list-vertical-spacing div.views-row {
  line-height: 133.3%; /* 16px/12px */
  margin-bottom: 10px;
  padding: 0;
}

.fusion-list-vertical-spacing .inner ul li {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

.fusion-list-vertical-spacing .inner ul li ul {
  margin-left: 10px; /* LTR */
}

/* Bold all links */
.fusion-bold-links .inner a {
  font-weight: bold;
}

/* Float imagefield images left and add margin */
.fusion-float-imagefield-left .field-type-filefield,
.fusion-float-imagefield-left .image-insert,
.fusion-float-imagefield-left .imagecache {
  float: left; /* LTR */
  margin: 0 15px 15px 0; /* LTR */
}

/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-left .views-row {
  clear: left; /* LTR */
}

/* Float imagefield images right and add margin */
.fusion-float-imagefield-right .field-type-filefield,
.fusion-float-imagefield-right .image-insert
.fusion-float-imagefield-right .imagecache {
  float: right; /* LTR */
  margin: 0 0 15px 15px; /* LTR */
}

/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-right .views-row {
  clear: right; /* LTR */
}

/* Superfish: all menus */
.sf-menu li {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

/* Superfish: vertical menus */
.superfish-vertical {
  position: relative;
  z-index: 9;
}

ul.sf-vertical {
  background: #fafafa;
  margin: 0;
  width: 100%;
}

ul.sf-vertical li {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  line-height: 200%; /* 24px */
  padding: 0;
  width: 100%;
}

ul.sf-vertical li a:link,
ul.sf-vertical li a:visited,
ul.sf-vertical li .nolink {
  margin-left: 10px;
  padding: 2px;
}

ul.sf-vertical li a:hover,
ul.sf-vertical li a.active {
  text-decoration: underline;
}

ul.sf-vertical li ul {
  background: #fafafa;
  border-top: 1px solid #ccc;
  margin-left: 0;
  width: 150px;
}

ul.sf-vertical li ul li.last {
  border-top: 1px solid #ccc;
  margin-bottom: -1px;
  margin-top: -1px;
}

ul.sf-vertical li ul {
  border-top: none;
  padding: 4px 0;
}

ul.sf-vertical li ul li {
  border-bottom: none;
  line-height: 150%; /* 24px */

More below but I can't paste that much

Thanks for the suggestion I've tried this

#header-group {
position: relative;
z-index: 9;
}

#logo {
 position: abosolute;
 top: 230px; /* 30 pixels from the top of the page */
 left: 10px; /* 80 pixels from the left hand side */
z-index: 999;
}

but it's not working. I've taken a screen shot of the div to show the structure.

http://i.stack.imgur.com/ff4DP.png

© Stack Overflow or respective owner

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Related posts about css

Categories cloud

.NET ASP.NET iphone linux python Windows mysql android sql windows-7 html c ruby-on-rails css objective-c ubuntu networking sql-server wpf asp.net-mvc ruby database Xml apache AJAX osx security regex django Performance 12.04 windows-xp mac web-development iphone-sdk vb.net Silverlight apache2 flash server perl best-practices email installation eclipse visual-studio algorithm windows-server-2008 winforms wcf firefox bash dns /Oracle