我可以这样做一个非法侵入div区吗？

Question

我是前端设计的新手。

制作了这样的代码。

<div id="header">
header
</div>
<div id="content">
content
</div>

<div id="sidebar">
in here will be login module
</div>

侧边栏如何能像pic一样侵入区域？

任何好的解决方案？

Answer 1

如果您只需要像这样定位侧边栏，则可以使用position: absolute。作为一个非常基本的测试，将以下类添加到HTML中：

body {
   margin:0
}

div {
    border: 1px solid black
}

#header {
    height: 50px;
}

#content {
    height:200px
}

#sidebar {
    position: absolute;
    top: 0;
    left: 100px;
    width: 100px;
    height: 250px;       
}

这是一个演示：http://jsfiddle.net/Mxqh4/

同样这只是一个演示，在一个真实的项目中必须动态调整，但这应该给你一个开始。

Answer 2

当然有可能。 CSS可以做任何事情;）

您必须学习使用position属性和float。

DEMO HERE

#wrap{
width:100%;
margin:0 auto;
}
#header{
width:100%;
height:50px;
background:orange;
}
#content{
width:100%;
height:500px;
background:green;
float:;
}
#sidebar{
width:25%;
height:550px;
background:red;
float:left;
position:relative;
bottom:550px;
left:20px;
}