HTML，CSS position定位问题 10
1.绝对定位和相对定位的作用的区别----随大小窗口变化问题2。绝对定位和相对定位的占位问题3,absolute:将对象从文档流中拖出，使用left，right，top，...
1.绝对定位和相对定位的作用的区别----随大小窗口变化问题
2。绝对定位和相对定位的占位问题
3,absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
此时对象不具有边距怎么理解 ？ 如果这时margin也做了设置，意思是不是，left和top的设置是以margin的最边缘起算的？
4.
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#da{
background-color:#FF0000;
margin-left:30px;
margin-top:50px;
width:600px;
height:400px;
}
#xiao{
background-color:#0000CC;
margin-left:10px;
margin-top:20px;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div id="da">
<div id="xiao"> </div>
</div>
小的div设置的margin的top没效果在浏览器上，在dreamweaver的可视化界面上是有效果的 为什么？？？ 如果在小div的样式里加入position:absolute;小的div设置的margin的top在浏览器上就又效果了 为什么？？？
要求：希望回答者能通俗易懂、最好有总结性语言和通俗化解释
请按照上面的问题顺序解答，回答时写规范，注意问号请回答
比较紧急，求帮助，在此表示感谢 展开
2。绝对定位和相对定位的占位问题
3,absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
此时对象不具有边距怎么理解 ？ 如果这时margin也做了设置，意思是不是，left和top的设置是以margin的最边缘起算的？
4.
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#da{
background-color:#FF0000;
margin-left:30px;
margin-top:50px;
width:600px;
height:400px;
}
#xiao{
background-color:#0000CC;
margin-left:10px;
margin-top:20px;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div id="da">
<div id="xiao"> </div>
</div>
小的div设置的margin的top没效果在浏览器上，在dreamweaver的可视化界面上是有效果的 为什么？？？ 如果在小div的样式里加入position:absolute;小的div设置的margin的top在浏览器上就又效果了 为什么？？？
要求：希望回答者能通俗易懂、最好有总结性语言和通俗化解释
请按照上面的问题顺序解答，回答时写规范，注意问号请回答
比较紧急，求帮助，在此表示感谢 展开
7个回答
展开全部
1.绝对定位和相对定位其实都一样，绝对定位是相对于整个html文档的位置(即整个页面)而言，相对定位是相对于内部标签的位置而言
2.“绝对定位和相对定位的占位问题”，不懂什么意思
3.我不知道那个边距是什么意思，left和top的设置是以margin的最边缘起算的
4.其实你说的margin-top没有效果恰恰是符合标准，你说的dreamweaver里有效是因为dreamweaver预览效果不符合标准，不用考虑它，当然加上margin的话如3所说会起作用，至于为什么，仅仅就是标准，没有为什么
5.可能你又要问margin-top没有效果怎么办，答案是<div id="da">加上padding-top:1px;
2.“绝对定位和相对定位的占位问题”，不懂什么意思
3.我不知道那个边距是什么意思，left和top的设置是以margin的最边缘起算的
4.其实你说的margin-top没有效果恰恰是符合标准，你说的dreamweaver里有效是因为dreamweaver预览效果不符合标准，不用考虑它，当然加上margin的话如3所说会起作用，至于为什么，仅仅就是标准，没有为什么
5.可能你又要问margin-top没有效果怎么办，答案是<div id="da">加上padding-top:1px;
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
缺点是麻烦，而且不利于的整体布局。 div的第一件事，你要了解自己的原则，层与层之间的关系。而不是强调像素的位置。地点定位布局可能是局部位置的调整，以及一些在该层上面的一层特别的地方按钮。写的定位是不建议在正常的布局和一般的写作背景，最特别的是门户网站，你可以保留你看他们的背景图片，有一张特大号内，几乎包括了所有需要的图片的页面，然后根据位置的图片不同的背景，这是做定位DIV的王道使用。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1.绝对坐标和相对坐标跟窗口大小变化没直接关系
2.使用相对坐标的元素仍然在文档流中，坐标是以该元素在文档流中的坐标为原点的；
绝对坐标是以最近的使用绝对或相对坐标的父元素的坐标为原点的，当父元素没有绝对坐标或相对坐标时，则是以body的坐标为原点的
3.怎么会没有外边距，当然有外边距；先算坐标，再算边距，看火狐的firebug的"布局"就能看到
4.小的div在没使用绝对坐标时，是因为小的div的margin-top与父div的margin-top合并了，垂直边距相关问题你可以搜一下
2.使用相对坐标的元素仍然在文档流中，坐标是以该元素在文档流中的坐标为原点的；
绝对坐标是以最近的使用绝对或相对坐标的父元素的坐标为原点的，当父元素没有绝对坐标或相对坐标时，则是以body的坐标为原点的
3.怎么会没有外边距，当然有外边距；先算坐标，再算边距，看火狐的firebug的"布局"就能看到
4.小的div在没使用绝对坐标时，是因为小的div的margin-top与父div的margin-top合并了，垂直边距相关问题你可以搜一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般这一种效果不需要使用定位写，可以这样写：
body {
margin:0px;
padding:0px;
}
#da {
background-color:#FF0000;
margin-left:30px; /* 简单的写法是：margin:50px 0 0 30px;其中四个值的表示顺序为：上 右 下 左，如果是三个值表示：上 左右 下。 */
margin-top:50px;
padding-top:20px; /* 简单的写法是：padding：20px 0 0 10px */
padding-left:10px;
width:600px;
height:400px;
}
#xiao {
background-color:#0000CC;
width:300px;
height:200px;
}
像这一种一个大的div里面套了一个小的div，可以给他的父级元素（上一级）用padding值解决，
body {
margin:0px;
padding:0px;
}
#da {
background-color:#FF0000;
margin-left:30px; /* 简单的写法是：margin:50px 0 0 30px;其中四个值的表示顺序为：上 右 下 左，如果是三个值表示：上 左右 下。 */
margin-top:50px;
padding-top:20px; /* 简单的写法是：padding：20px 0 0 10px */
padding-left:10px;
width:600px;
height:400px;
}
#xiao {
background-color:#0000CC;
width:300px;
height:200px;
}
像这一种一个大的div里面套了一个小的div，可以给他的父级元素（上一级）用padding值解决，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
body div的默认边距
IE默认为10px，body div的默认边距
FF默认为8px，
p的默认边距
IE默认为19px，通过p的margin-top属性设置
FF默认为1.12em，通过p的margin-bottom属性设置
ul ol的默认边距
IE默认为40px，通过ul、ol的margin属性设置
FF默认为40px，通过ul、ol的padding属性设置
所以你不止要设置body{padding:0px;margin:0px;}
而是要用这个*{padding:0px;margin:0px;}
这样才对，然后才是你的定位在多少像素的问题。
3,absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
此时对象不具有边距怎么理解 ？ 如果这时margin也做了设置，意思是不是，left和top的设置是以margin的最边缘起算的？
意思就是你设置margin的时候，设置了多少像素就从多少像素开始算起，所以定位的时候一般不设置margin
你的样式没用到定位。我猜你的是用火狐之类的浏览器看的，当父框架没有使用overflow:hidden;时，火狐认不到边，所以这时候你设置的margin-top:会失效。这个是我的工作实践中总结的，不知道你的理论知识有没有说到这点。所以解决方法是
#da{
background-color:#FF0000;
margin-left:30px;
margin-top:50px;
width:600px;
height:400px;
overflow:hidden;
}
希望对你有用！
IE默认为10px，body div的默认边距
FF默认为8px，
p的默认边距
IE默认为19px，通过p的margin-top属性设置
FF默认为1.12em，通过p的margin-bottom属性设置
ul ol的默认边距
IE默认为40px，通过ul、ol的margin属性设置
FF默认为40px，通过ul、ol的padding属性设置
所以你不止要设置body{padding:0px;margin:0px;}
而是要用这个*{padding:0px;margin:0px;}
这样才对，然后才是你的定位在多少像素的问题。
3,absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
此时对象不具有边距怎么理解 ？ 如果这时margin也做了设置，意思是不是，left和top的设置是以margin的最边缘起算的？
意思就是你设置margin的时候，设置了多少像素就从多少像素开始算起，所以定位的时候一般不设置margin
你的样式没用到定位。我猜你的是用火狐之类的浏览器看的，当父框架没有使用overflow:hidden;时，火狐认不到边，所以这时候你设置的margin-top:会失效。这个是我的工作实践中总结的，不知道你的理论知识有没有说到这点。所以解决方法是
#da{
background-color:#FF0000;
margin-left:30px;
margin-top:50px;
width:600px;
height:400px;
overflow:hidden;
}
希望对你有用！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没效果是你使用的浏览器问题 DW与实时预览区是电脑上IE版本
说通俗点吧 定位问题 如果position:absolute 没有被relative所包含 那就是针对的当前浏览器窗口左上角顶端开始 如果是被relative所包含 就是基于包含absolute的relative层的左上角开始
单独absolute是不占位的 如果不定义left top值 他会自动跑到浏览窗体左上角顶部去
单独relative是占位的，即时使用了left top 也会同padding属性一样 顶出left或者top的值
说通俗点吧 定位问题 如果position:absolute 没有被relative所包含 那就是针对的当前浏览器窗口左上角顶端开始 如果是被relative所包含 就是基于包含absolute的relative层的左上角开始
单独absolute是不占位的 如果不定义left top值 他会自动跑到浏览窗体左上角顶部去
单独relative是占位的，即时使用了left top 也会同padding属性一样 顶出left或者top的值
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
