设置DIV的位置

iseebaby 2010-04-28 05:31:17

布局
中有两个DIV1，DIV2

有个按钮，功能是，上一步，下一步的功能
默认DIV1显示，按下一步，DIV2显示，DIV1不显示

怎么样设置DIV2显示时位置同DIV1

...全文

441 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhouwei7682719 2010-04-29

打赏
举报

把两个DIV放在同一个DIV3中,div3有一个绝对定位； div1为空的时候，div2有东西;这样div3的位置就是div2的； div2为空的时候 div3的位置就是div1的！！

请叫我卷福 2010-04-28

打赏
举报

要想两个层显示在同一个位置，需要把他们的CSS中的position属性设置为:Absolute，他们的Top和Left属性对应相等，他们的容器的position设置为Relative.



<script type="text/javascript">

        function shownext(obj) {

            if (obj) {

                document.getElementById('firstbox').style.display = 'block';

                document.getElementById('nextbox').style.display = 'none';

            }

            else {

                document.getElementById('firstbox').style.display = 'none';

                document.getElementById('nextbox').style.display = 'block';

            }

        }

        

    </script>

……

<body>

<div style=" position:relative;top:300px;left:200px;">

    <div id='firstbox' style='height:100px;background-color:Red;position:absolute;top:0px;left:0px;'></div>

     <div id='nextbox' style='height:100px;background-color:Blue; display:none;position:absolute;top:0px;left:0px;'></div>

     <input id='btnfirst' type="button" value='上一步' onclick='shownext(true)' />

     <input id='btnnext' type="button" value='下一步' onclick='shownext(false)' /></div>

</body>

……

wuyq11 2010-04-28

打赏
举报

onclientClick中
var div=document.getElementById("div1")
div.style.display=div.style.display=="none"?"block":"none";

div1.Style["Display"] = "Block"; //显示
div1.Style["Display"] = "None"; //隐藏

mengxj85 2010-04-28

打赏
举报

[Quote=引用 1 楼 kinglot 的回复:]
把两个DIV放在同一个DIV中，不就行了吗？

HTML code

<html>
<head>
<script type="text/javascript">
function shownext(obj) {
if (obj) {
document.getElementById('firstbox').st……
[/Quote]
UP

sharkss 2010-04-28

打赏
举报

怎么将网站在浏览器中居中啊

游园密语 2010-04-28

打赏
举报

用同一个样式

kinglot 2010-04-28

打赏
举报

把两个DIV放在同一个DIV中，不就行了吗？



<html>

<head>

<script type="text/javascript">

        function shownext(obj) {

            if (obj) {

                document.getElementById('firstbox').style.display = 'block';

                document.getElementById('nextbox').style.display = 'none';

            }

            else {

                document.getElementById('firstbox').style.display = 'none';

                document.getElementById('nextbox').style.display = 'block';

            }

        }

        

    </script>

</head>

<body>

<div style=" position:relative;top:300px;left:200px;">

    <div id='firstbox' style='height:100px;background-color:Red;'></div>

     <div id='nextbox' style='height:100px;background-color:Blue; display:none;'></div>

     <input id='btnfirst' type="button" value='上一步' onclick='shownext(true)' />

     <input id='btnnext' type="button" value='下一步' onclick='shownext(false)' /></div>

</body>

</html>