2 nextlove 1015 NextLove_1015 于 2016.09.14 14:55 提问

关于div的内容不和div一起移动的问题请教,也就是div3的position设置

代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>t4</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }

            #div1 {
                width: 100px;
                height: 100px;
                border: 1px solid black;
                background-color: red;
                float: left;
            }

            #div2 {
                width: 100px;
                height: 100px;
                border: 1px solid black;
                background-color: yellow;
                float:left;
            }

            #div3 {
                width: 100px;
                height: 100px;
                border: 1px solid black;
                background-color: blue;
                position:relative;/*absolute*/
                top:100px;
            }
        </style>
    </head>
    <body>

        <div id="div1">1111111111</div>
        <div id="div2">2222222222</div>
        <div id="div3">3333333333</div>
    </body>
</html>

3个回答

showbo
showbo   Ds   Rxr 2016.09.14 15:14

不懂要问什么。。absolute不占位,脱离文档流

fleetingevent
fleetingevent   2016.09.14 15:01

position=fixed 就不随着动了,你是这个意思吗?

fleetingevent
fleetingevent 回复NextLove_1015: 我觉得和div1 div2 的float有关,我也是初学,可以看一下http://bbs.csdn.net/topics/390653245
接近 2 年之前 回复
NextLove_1015
NextLove_1015 #div3 { width: 100px; height: 100px; border: 1px solid black; background-color: blue; position:relative;/*absolute*/ top:100px; } 就是这里 relative的时候,里面的字不会动,absolute的时候 里面的字会和div一起移动,这是为什么啊
接近 2 年之前 回复
zhh1996075
zhh1996075   2016.09.14 15:47

看你的div大小,,可以设置padding ,,margin属性,,position的absolute绝对定位和relative相对定位可以设置div的位置,

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
解决:子div设置margin-top使得父div也跟着向下移动
之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动。我用代码和图描述一下问题:   *{margin:0;padding:0;} .div1{background:green;height:100px;} .div2{background:darkblue;height:100px;} .subDiv{background:red;
DIV position z-index 设置层级
z-index 设置层级 也就是设置元素的堆叠顺序。默认为0,即和文档流处于同一个层级。 如果设置-1,则处于底层。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:z-index 仅能在定位元素上奏效(例如 position:absolute;)!
div跟着滚动条移动而移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8">
【JavaScript】div+css定位position详解
1、div+css中的定位position 最主要的两个属性:absolute(绝对定位)、relative(相对定位)    (1)absolute(绝对定位),位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。    (2)relative(相对定位),定位是相对的,那他是相对于什么呢?参照物是什么?    看代码: #left{background:#
Div层随滚动条移动
New Document window.onscroll=function(){ var oDiv=document.getElementById("d"); oDiv.style.top=document.body.scrollTop + 300;  //控制上下位置oDiv.style.left = document.body.scrollLeft + 300; //控制横向位置} as
让position:absolute超出DIV溢出隐藏
通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏!
CSS、HTMl使用position: fixed;实现div的高度填满剩余空间
CSS、HTMl实现div的高度填满剩余空间 html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> *{ margin: 0; padding:0; } .conten
div设置透明度后里面的内容也被透明化的解决方法
div 设置了透明度以后,返现里面的 图片 也被盖了一层 透明度 只需要在设置 div 颜色的透明度的时候改用 rgba 形式就可以了 可以先找到 16 进制颜色对应的 rgb 值 如:125,125,125 然后通过   rgba(125,125,125,0.2)  来处理透明度的问题
CSS的position:fixed的使用(固定不动的div)
前段时间,在做一个项目时需要使一个层相对于浏览器边框固定,那时用position:absolute试了下,发觉absolute是对网页边框而言的。后来,上网查了一些根据滚动条的移动,动态地改变left和top的值的JavaScript语句,虽然能实现了类似的效果,但滚动条移动时,那个层晃来晃去的,感觉不好看,想要一种能使层固定不动的做法。 且看下面的代码: #help{
高度大于100%的fixed定位div显示不全问题(轻松解决)
height: 100%; overflow: auto; 给position:fixed的div加上上面css即可