Question

我不能为我的生活弄清楚为什么div“book_button”不会显示在页面底部，页脚上方。我有一个主包装div，然后有一个内容div。我把book_button放在内容div之外的相对位置。在Dream weaver设计窗口中，它显示了我想要它的位置。当我在浏览器中查看它时，它会像这样显示

http://kerrydean.ca/GreyRiver/fly_fishing.html

这是css

#Wrapper {
    margin-top:0;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background-color: #ebebeb;
    padding: 0px;
    width: 100%;
    top: 75px;
}
#Header {
    background-color: #b2b85c;
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0px;
    overflow: hidden;
    z-index: 999;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
}
#Content {
    width: 900px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}
#Left_Side {
    padding: 10px;
    width: 485px;
    clear: left;
    float: left;
}
#Right_Side {
    width: 340px;
    position: relative;
    display: inline;
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
    padding-left: 35px;
    height: 100%;
}
#Footer {
    background-color: #BCC271;
    height: 15px;
    width: 100%;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    float: left;
    position: relative;
}
/* Navigation*/
.nav-wrap {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 900px;
    padding-left: 15px;
    padding-top: 31px;
}
ul#navlist
{
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
}

#navlist li
{
    display: inline;
    list-style-type: none;
}

#navlist a {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    padding-top: 3px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-left: 20px;
}

#navlist a:link, #navlist a:visited
{
    color: #fff;
    background-color: #b2b85c;
    text-decoration: none;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #FFF;
}

#navlist a:hover
{
    color: #fff;
    background-color: #b2b85c;
    text-decoration: none;
    background-image: url(../GreyRiver/Images/pointer.jpg);
    background-repeat: no-repeat;
    background-position: 50% bottom;
}
.border-none{
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;    
    }
/*End of Navigation*/
#header_img{
    height: 250px;
    width: 900px;
    position: relative;
    background-image: url(../GreyRiver/Images/Fly_fishing_header.jpg);
    margin-top: 10px;
    margin-bottom: 25px;
}
#book_button{
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
}

我明白了。

我把book_button div放在页脚之前。我将宽度设为100％，位置：相对并添加浮点数：左

非常感谢！

Answer 1

1）制作#Wrapper position:relative

2）制作#book_button position:absolute，设置bottom:40px;right:200px;

Answer 2

这可能不是最佳做法，但您可以使用top样式属性将按钮按下到所需位置。看起来页面的内容是静态的，这意味着每次页面加载时按钮都不需要动态定位。因此，定位它的硬编码值可能对您有用。

Answer 3

我使用了您当前的视图源，只是将#book_button更改回亲属，它显示在页脚和内容之间。将其作为绝对值更改回亲属将无效。

将div推到页面底部

3 个答案: