1. 首頁
  2. 問答
  3. 位置：絕對

位置：絕對

2011-02-01 176 views
1

我有一個叫div的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

來源

2011-02-01 Andrew

+1

CSS比科學更多地詮釋和藝術。嘗試列表分開：http://www.alistapart.com/ – 2011-02-01 02:17:04

+0

此外，如果您可以提供帶有#logo元素的html，那將非常有幫助。 – 2011-02-01 02:18:00

回答

4

position總是相對於下一個父有明確設置position

如果您的徽標正在消失，這可能是因爲你的頭不至少有position:relative集，或者類似的東西出現。使用Firebug或Chrome的檢查，你可以看到徽標在哪裏？

發佈您的HTML和CSS的標題/正文，我們會到達它的底部！

來源

2011-02-01 02:25:53 jlmakes

+1

這個頁面有一個很好的例子：http://css-tricks.com/absolute-positioning-inside-relative-positioning/ – DarenW 2011-04-15 06:21:26

1

這並沒有完全回答你的問題，但作爲一個旁白，我在過去幾周看過CSS後學到的一件事就是z-index只適用於帶有位置標籤的屬性。換句話說，在你的情況下，它是沒有意義的，因爲它需要與某些東西進行比較。添加一個位置：相對和z-索引對任何持有#logo應該有所幫助。

來源

2011-02-01 02:54:05 emragins

相關問題

 相關問題