Position:absolute

2023-02-08 00:25 问答作者：

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

position is always relative to the next parent with an explicitly set position

If your logo is disappearing, it's probably because your header doesn't at least have position:relative set, or something similar occurring. Using Firebug or Chrome's inspect, can you see where the logo is?

Post your HTML, and CSS for the header/body, and we'll get to the bottom of it!

This does not fully answer your question, but as an aside, one thing I've learned since looking at CSS in the past couple weeks is that z-index only works on attributes with a position tag. In other words, in your case it's meaningless since it needs something to compare to. Adding a position: relative and a z-index to whatever is holding #logo should help.

继续阅读：css

Position:absolute

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？