0

我想要做的是，将两个 div 块，CV 和 Contact 放在页面底部，当将鼠标悬停在它上面时，它们会像在这种状态下一样覆盖整个页面。我尝试使用 margin-top 属性移动它们，但是当我将鼠标悬停在它们上时它们的行为不正常。另外，我不想要任何用户屏幕大小的滚动条，这些框总是出现在页面的角落。我的解决方案对此有效吗，还是我需要一些 javascript 来执行这些操作？这是我的jsfiddle：

http://jsfiddle.net/cR9NL/

在这种情况下我应该使用什么位置：absolute或relative？

4

2 回答 2

1

html代码还是一样的，下面是我给你的css和demo：

CSS

html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }

#container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#container div {
    height: 25%;
    width: 15%;
    text-align: center;
}

#container>div:hover {
    height: 100%;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 5;
}

#upper-left{
    background: #77cc00;
    float: left;
    border: solid 3px #99ee22;
}


#upper-right{
    background: #ffdd22;
    float: right;
    border: solid 3px #ffff44;
}
#lower-right {
    position: absolute;
    bottom:0;
    right: 0;
    background: #55bbff;
    border: solid 3px #77ddff;
}
#lower-left{
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ff5522;
    border: solid 3px #ff7744;
}
#container>div>p {
    font-family: Tahoma; 
    margin: 28% auto;
    font-weight: 900;
    color: white;
    font-size: 30px;
}

演示

http://jsfiddle.net/bartekbielawa/cR9NL/2/

于 2013-04-22T23:10:39.797 回答
1

使左下角和右下角的 div 定位为绝对值，分别为底部值和 0 为左值和右值。

小提琴:)：

position:absolute;
bottom:0;
right:0;

http://jsfiddle.net/cR9NL/1/

于 2013-04-22T23:05:44.593 回答