position = fixed不适用于移动新闻自动收报机

时间:2014-04-21 12:29:10

标签: html css google-chrome

position = fixed适用于我网页上的某些元素,但它不适用于必须位于页面底部的新闻自动收报机。请帮我找错。提前致谢 ! 这是我的css代码: -

.sticky_menu
    {
    position:fixed;
    //-webkit-transform: translate3d(0, 0, 0);
    //float:bottom;
    //height:200px;
    //width:1218px;
    //border:3px solid green;
    //box-shadow:0px -5px 5px #888888;
    }

                   #wrapper {
                width: 100%;
                margin: -100px 0 0 0;
                position: relative;
                left: 0;
                //top: 50%;
                font-family: Arial, Geneva, SunSans-Regular, sans-serif;
                font-size: 14px;
                color: #333;
                line-height: 22px;
                //min-height: 300px;
                //height: 100%;
                padding: 0;
                margin: 0;
            }
            #wrapper h3 {
                font-size: 20px;
                text-align: center;
            }

            #wrapper > div {
                background-color: #eee;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                width: 100%;
                height: 30px;
                padding: 15px 0;
                overflow: hidden;
            }
            #wrapper > div.first {
                border-bottom: none;
            }

            #wrapper dl {
                display: block;
                margin: 0;
            }
            #wrapper dt, #wrapper dd {
                display: block;
                float: left;
                margin: 0 10px;
                padding: 5px 10px;
            }
            #wrapper dt {
                background-color: #f66;
                color: #fff;
            }
            #wrapper dd {
                color: #333;
                margin-right: 50px;
            }

            code {
                font-style: italic;
            }

这是我的HTML代码: -

<div class="sticky_menu">

<div id="wrapper">
            <div class="first">
                <dl id="ticker-1">
                    <dt>1.5.2014</dt>
                        <dd> APM Report updated</dd>

                    <dt>7.5.2014</dt>
                        <dd>EBAR(Account Level)report updated</dd>

                    <dt>9.6.2014</dt>
                        <dd>Digital Dashboard Pivot Table Report updated</dd>

                    <dt>10.6.2014</dt>
                        <dd>Safekey Report updated</dd>
                    <dt>13.5.2014</dt>
                        <dd>POINT Tool launched</dd>
                    <dt>1.6.2014</dt>
                        <dd>EBAR(Account Level) Report launched</dd>
                </dl>
            </div>

        </div>

</div>

这是我所指的新闻自动收报机: - http://coolcarousels.frebsite.nl/c/9/

3 个答案:

答案 0 :(得分:0)

指定固定元素的位置:

.sticky_menu { position:fixed; bottom: 0; }

答案 1 :(得分:0)

.sticky_menu
    {
    position:fixed;
    bottom: 0px;
    }

应该工作

答案 2 :(得分:0)

我在http://coolcarousels.frebsite.nl/c/9/

检查了您的代码

我认为主要问题是你的z-index,#c-footer有z-index:10,所以即使你给出position:fixed和bottom:0;它会隐藏在#c-footer div后面,所以你需要增加你的新闻自动收报机(#wrapper)div的z-index

#wrapper {
  bottom: 0;
  margin: -100px 0 0;
  position: fixed;
  width: 100%;
  z-index: 20;

}