Question

我的位置div id #lineAzurebotom有问题。我在页面底部找到了div。我想要下面的div并接近绿色和白色。指向html页面的链接：example

用于描述问题的图片链接：http://www.centerwow.com/window/pic/position.png

我的代码css：

body {
    //overflow:hidden;
    background: none repeat scroll 0 0 #6000CC;
    font-family: Arial;
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px;
    height:1000px;

}
 .insidWindow {
    background: none repeat scroll 0 0 #CCFFFF;
    margin: 0px auto 10px auto;
    padding: 10px;
    position: relative;
    top:-515px;
    width:2.5%;
}
h2 {
    font-family:Palatino Linotype;

    color: #443333;
    font-size: 14px;
    line-height: 7px;
    margin: 0px 5px 0px 5px;
    padding: 5px;
    color: white;
}
.lineAzure{
    background: #0066ff;
    line-height: 7px;
    margin: 0px 0px 0px 0px;
    height:15px;
}
#lineAzurebotom{
    background: #880000;
    line-height: 7px;
    margin: 0px 0px 0px 0px;
    }
#lineYelow{
    background: #00FFFF;
    border-bottom: 4px solid #BBBBBB;

    line-height: 7px;
    margin: 0px 0px 0px 0px;

    height:35px
}
#wrapMein{
    background: green;
    //overflow:hidden;
    margin: 0px 5px 20px 0px;
    padding: 0px 0px 0px 0px;
    position: relative;
    height:500px;
}
.column{
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    position: relative;
    width:20%;
    height:495px;
    position:relative;
    top:-15px;

}
.rcolumn{
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    position: relative;
    width:20%;
    height:495px;
    position:relative;
    top:-528px;
    float:right;

}
.ui-wrapper {
    border: 2px solid #70A029;
}

.ui-resizable {
    position: relative;
}

.ui-resizable-e {
    background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
    cursor: e-resize;
    height: 100%;
    right: 0;
    top: 0;
    width: 6px;
}
.ui-resizable-handle {
    display: none;
    font-size: 0.1px;
    position: absolute;
}
.ui-resizable-s {
    background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
    bottom: 0;
    cursor: s-resize;
    height: 6px;
    left: 0;
    width: 100%;
}
.ui-resizable-se {
    background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
    bottom: 0;
    cursor: se-resize;
    height: 9px;
    right: 0;
    width: 9px;
}

我的代码html：

<!--?xml version="1.0" encoding="UTF-8"?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Window Demo</title>

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/window.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="style/style.css" type="text/css" >
<link rel="stylesheet" href="style/jquery-ui-1.8.18.custom.css" type="text/css">



</head>


<body>
<h2>welcome to centerwow.</h2>
<div class="lineAzure"></div>
<div id="lineYelow"></div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%" >&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</div>
<div id="leftcolumn" class="column"></div>
<div id="rightcolumn" class="rcolumn"></div>
<div class="insidWindow">
    <div id="windowResize" class="ui-wrapper" style="height: 460px; width: 350px;">
        <div style="position: absolute; top: 20px; left: 20px; " >
            Resize me<br>
            Please try to resizeme:<br> www www www.
        </div>
    </div><br>
    </div><!--insidWindow-->
<div class="lineAzurebotom">here is my div lineAzurebotom</div>
</div><!--wrapMein-->
</body>
</html>

Answer 1

div的定位是由wrapmein div的定位和后续div的定位引起的。（例如position:relative; top:-515px;即使您使用了-515px，div在移动之前仍然会远离其原始位置。

这是我正在使用的代码工作：

<!--?xml version="1.0" encoding="UTF-8"?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Window Demo</title>

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/window.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="style/style.css" type="text/css" >
<link rel="stylesheet" href="style/jquery-ui-1.8.18.custom.css" type="text/css">



</head>


<body>
<h2>welcome to centerwow.</h2>
<div class="lineAzure"></div>
<div id="lineYelow"></div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%" >&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</div>
<div id="leftcolumn" class="column"></div>
<div id="rightcolumn" class="rcolumn"></div>
<div class="insidWindow">
    <div id="windowResize" class="ui-wrapper" style="height: 460px; width: 350px;">
        <div style="position: absolute; top: 20px; left: 20px; " >
            Resize me<br>
            Please try to resizeme:<br> www www www.
        </div>
    </div><br>
    </div><!--insidWindow-->
</div><!--wrapMein-->
<div class="lineAzurebotom">here is my div lineAzurebotom</div>
</body>
</html>

参见此演示：

http://jsfiddle.net/gHs8C/

div位置不在正确的位置

1 个答案: