位置：绝对

时间：2011-02-01 02:11:20

标签： css

我有一个名为logo的div。我希望徽标位于其他区域的顶部并重叠到drupal站点的前言顶部，徽标当前位于标题区域。

我抬起绝对位置，我认为我需要使用但是当我使用绝对位置标志消失时，我可以看到它，如果我使用位置固定，相对等等。

我认为徽标被隐藏了，因为我没有使用z-index，但即便如此，我也看不到徽标。

我做错了什么？

#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 */
}

也有人知道一个非常好的免费在线css课程吗？

以下是一些其他信息，即CSS和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 */

以下更多，但我无法粘贴那么多

感谢您提出的建议

#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;
}

但它不起作用。我拍摄了div的屏幕截图来显示结构。

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

2 个答案:

答案 0 :(得分：4)

position始终相对于明确设置为position

的下一个父级

如果您的徽标正在消失，可能是因为您的标题至少没有position:relative设置，或类似的事情发生。使用Firebug或Chrome检查，您能看到徽标的位置吗？

发布您的HTML和CSS标题/正文，我们将深入其中！

答案 1 :(得分：1)

这并没有完全回答你的问题，但顺便说一句，自从过去几周看CSS以来，我学到的一件事就是z-index仅适用于带有位置标记的属性。换句话说，在你的情况下它是没有意义的，因为它需要比较的东西。添加一个位置：相对和一个z-index到任何持有#logo的东西应该有帮助。

相关问题
最新问题