使文本顯示在圖像HTML和CSS之上

Question

我努力讓div文本中的文本顯示在圖像的頂部。 我也試圖得到它，以便版權文本轉到右上角，footernavmenu到左角。

這是我的HTML代碼：

<div id="footer">
  <div id="footerimage">
    <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
  </div><!-- footer image --> 
  <div id="footertext"> 
    <div id="footernavmenu">
      <ul id="list-footer-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="kayaking-di">kayaking Disciplines</a></li>
        <li><a href="links.html">Useful links</a></li>
      </ul><!-- ul end list-footer-nav -->
    </div><!-- div end footernavmenu -->
    <div id="copyright">
      <div class="copyrigttext">
        Copyright © 2013 Elliott Davidson, All Rights Reserved.
      </div><!-- end div copyrighttext -->
    </div><!-- end div copyright -->
  </div><!-- end div footertext -->            
</div><!-- end of footer -->

這是CSS代碼：

    #footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:relative;
    width:980px;
    height:auto;
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
}

#footernavmenu {
    width : 480px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}

ul#list-footer-nav {
    list-style : none;
    padding-right : 3px;
    width:auto;
}

ul#list-footer-nav li {
    display : inline;
    padding-right: 3px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
}

ul#list-footer-nav li a:hover {

}

ul#list-footer-nav li a:active {

}

#copyright {
    width:480px;
    height:auto;
    right:0px;
    float:right;
}

.copyrighttext {

}

Answer 1

HTML：

    <div id="footertext"> 

        <div id="footernavmenu">

            <ul id="list-footer-nav">

                <li><a href="index.html">Home</a></li>

                <li><a href="design.html">Design</a></li>

                <li><a href="about.html">About</a></li>

                <li><a href="kayaking-di">kayaking Disciplines</a></li>

                <li><a href="links.html">Useful links</a></li>

            </ul><!-- ul end list-footer-nav -->

        </div><!-- div end footernavmenu -->

        <div id="copyright">

            <div class="copyrigttext">

                Copyright © 2013 Elliott Davidson, All Rights Reserved.

            </div><!-- end div copyrighttext -->

        </div><!-- end div copyright -->

    </div><!-- end div footertext -->

CSS：

#footertext {
    background: url('images/footer-waves.jpg') fixed top left no-repeat;
    width: 980px;
    height: 140px;
}

為了使版權向右移動，footernavmenu向左移動：

#copyright {
    float: right;
    vertical-align: top; // or bottom if you want bottom corner
}

#footernavmenu {
    float: left;
    vertical-align: top; // or bottom if you want bottom corner
}

Answer 2

這是一個更實用的解決方案，您只需將＃footer-text容器及其子容器移到 <img>標簽之后的#footerimage容器中。

之后，您可以指定相對於頁腳文本的位置，然后將絕對位置設置為頁腳圖像以及其他一些內容。 請看我的小提琴來試驗我的解決方案。

HTML代碼：

<div id="footer">
  <div id="footerimage">
    <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
      <div id="footertext"> 
        <div id="footernavmenu">
          <ul id="list-footer-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="design.html">Design</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="kayaking-di">kayaking Disciplines</a></li>
            <li><a href="links.html">Useful links</a></li>
          </ul><!-- ul end list-footer-nav -->
        </div><!-- div end footernavmenu -->
        <div id="copyright">
          <div class="copyrigttext">
            Copyright © 2013 Elliott Davidson, All Rights Reserved.
          </div><!-- end div copyrighttext -->
        </div><!-- end div copyright -->
      </div><!-- end div footertext -->          
  </div><!-- footer image --> 
</div><!-- end of footer -->

CSS代碼：

#footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:absolute;
    width:980px;
    height:auto;
    bottom: 0
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
    position: relative;
}

#footernavmenu {
    width : 480px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}

ul#list-footer-nav {
    list-style : none;
    padding-right : 3px;
    width:auto;
}

ul#list-footer-nav li {
    display : inline;
    padding-right: 3px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
}

ul#list-footer-nav li a:hover {

}

ul#list-footer-nav li a:active {

}

#copyright {
    width:480px;
    height:auto;
    right:0;
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: right;
}

.copyrighttext {

}

Answer 3

在#footertext元素上將圖像添加為背景圖像：

#footertext {
  background-image: url('images/footer-waves.jpg');
}

Answer 4

CSS

 .ParentDivclassThatContainsFooterimageandFootertext{
    position:relative;
  }

#footerimage{
  position:relative;
}

#footertext {
   position:absolute;
    width:980px;
    top: whateversuits;
    left: whateversuits;
   height:auto;
}

  .copyright {
     float: right;
      width:50%; // adjust according to what you want.
    vertical-align: top; // or bottom if you want bottom corner
  }


 .footernavmenu {
   float: left;
    vertical-align: top; // or bottom if you want bottom corner
    width: 50%;  adjust according to what you want.
 }