html中的定位问题

<html>
<head>
<style>
    #box1{psoition:relative}

    #box2{psoition:absolute;top:10px;left:10px;}
</style>
    </head>
<body>
<div id="box1" style="width: 500px;height: 500px;background-color: red">
    <div id="box2" style="width: 300px;height: 300px;background-color: yellow">
        <div id="box3" style="width: 100px;height: 100px;background-color: blue;position: absolute;top:50px;left:50px"></div>

    </div>

</div>
</body>
</html>

结果:


因为box2把box3包住的,也就是box2是box3的第一个父元素。只需要给box3绝对定位,然后设置top,left等属性,就是相对于box2定位的,因为absolute,虽然叫绝对定位,但是实际它是相对于它的第一个父元素定位的,你估计没有搞清absolute的实质吧。


希望能够帮助到你,望采纳!



你把box3的position设置成absolute, 就是相对于box2定位的, 不需要在设置box2为相对定位,

另外你的代码里, position拼写有误,

下面是测试用的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns=
 xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
</head>
<body>
 <style>  
    #box1{position:relative;}  
    #box2{position:absolute;top:100px;left:100px;} 
    #box3{position:absolute;top:100px;left:100px;}
</style>

    <div id="box1">      111111  

    <div id="box2">  22222              

    <div id="box3">333333</div>    
    </div>
    </div>
</body>
</html>


HTML中的div定位问题~

可以。html的css样式中有定位标签。例如:
position:relative 生成相对定位的元素,相对于其正常位置进行定位;

position:absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。是绝对定位;

position:fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。可以随着浏览器的滚动进行滑动,这个效果在赵一鸣随笔博客就有,当你向上滑动页面的时候,右下角会出现一个置项的按钮,它就用到了这个属性,你可以去搜索一下赵一鸣随笔博客查看效果。有问题可以根据博客中的联系方式联系我!

如果我的回答对你有用,可以采纳哦!


如图,position:relative 是在3个DIV原来各自位置的基础上进行移动的,也就是说和父元素没有直接的关系,仅仅相对于他们自身在文档中本该出现的位置进行移动。比如,设置了right:10px,就表示在原位置的基础上,向左移动10px,这时将超出父元素的外框。需要注意的是,relative是相对于自身,而不是相对于父元素。
另外,相对于父元素进行定位,是指在父元素设置为 relative ,子元素设置为 absolute 的情况下。如果父元素没设置为relative,而是默认的static,那么子元素的absolute就是相对于body进行定位,而不是父元素。

#13298018409# html中绝对定位是根据什么来定位 - ******
#奚穆# 父元素 设了 position:relative; 子元素 设了 position:absolute; 那么子元素就以父元素的位置进行绝对定位.如果没有父级或同级设了position:relative;则以浏览器为基准进行定位

#13298018409# HTML里的相对定位和绝对定位谁能说清楚?什么时候用相对定位什么时候用绝对定位? - ******
#奚穆# 相对定位设置后 就是相对于它本身所在文档流的位置进行定位 这时设置它的top left bottom right 都是相对于他原来的位置而言绝对定位...

#13298018409# html 目的定位锚是什么? 请说详细点 着急在线等 - ******
#奚穆# 找了几个博客,这个说的比较清楚:有个专题页面要在里面三个地方加锚点,跳到同一个地方,简单总结如下:同页面: 问题一? 问题二? 问题二?问题一的解答不同页面: a.html的内容 问题一? b.html的内容 问题一的解答注: 1.确定...

#13298018409# html中position的问题 - ******
#奚穆# 设置不同的高度(第二个div的设置为:top: 上一个div的高度) 例如第一个div高度32px则第二个设置: .div2{position: fixed;left:0;top:32px; }

#13298018409# HTML中的定位,position中的relative相对定位,是我要让它往右点,就得定left吗 - ******
#奚穆# left它的取值决定了他的的偏移方向,如果是正值,会往右靠,如果是负值,也会往左靠,right同理

#13298018409# 网页设计中元素如何进行定位? - ******
#奚穆# 可以用表格(table)或者层(div)定位

#13298018409# html怎么在div里面给标签定位 - ******
#奚穆# 1:定位的几个值1.1,生成绝对定位的元素,相对于浏览器窗口进行定位.----->position:fixed;1.2.生成相对定位的元素,相对于其正常位置进行定位.------>position:relative;1.3.生成绝对定位的元素,相对于 static 定位以外的第一个父元素进...

#13298018409# HTML中的定位,position中的absolute绝对定位,如果我让它往上10px再往右10 - ******
#奚穆# 这个我建议你自己试试 也就是top bottom left right 这四个 绝对定位和相对定位都可以用这四个控制. 多自己尝试,效果最好

#13298018409# html内有关div的位置问题.详细请看附图. - ******
#奚穆# 这里是div定位的问题,你对div设置了向左浮动,第二个文字后方有空间,下方的div就会向左上方移动,如果把文字放在块状标记比如:<p>/<div>/<span>等标记里面,底下的div就不会向上,你这里对于<p>/<div>/<span>都有设置样式,所以我就在你第二个div中大div的文字后面加了一个<br />,然后就正常了,你如果想弄明白可以去查一下网上关于div定位的知识

#13298018409# HTML,CSS position定位问题 - ******
#奚穆# 1.绝对定位和相对定位其实都一样,绝对定位是相对于整个html文档的位置(即整个页面)而言,相对定位是相对于内部标签的位置而言 2.“绝对定位和相对定位的占位问题”,不懂什么意思 3.我不知道那个边距是什么意思,left和top的设置是以margin的最边缘起算的 4.其实你说的margin-top没有效果恰恰是符合标准,你说的dreamweaver里有效是因为dreamweaver预览效果不符合标准,不用考虑它,当然加上margin的话如3所说会起作用,至于为什么,仅仅就是标准,没有为什么 5.可能你又要问margin-top没有效果怎么办,答案是<div id="da">加上padding-top:1px;

  • 在HTML中,三种定位的区别和含义分别是什么?
  • 答:一、相对定位 relative 1.参照物为自身;2.相对定位只改变显示的位置,而不会改变占用的空间位置;3.关于距离的正负值 二、绝对定位 absolute 1.参照物为具有定位属性的父元素。PS:如果距离当前最近的父元素不具有定位属性...

  • html怎么固定位置
  • 答:需要准备的材料分别有:电脑、浏览器、html编辑器。1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的<body>标签中,输入html代码:<button style="position: absolute;left: 250px;top: 40...

  • html中的“ position: absolute”是绝对定位,怎么用?
  • 答:html中的“position:absolute”是绝对定位,一般配合“top”和“left”属性同时使用。1、新建html文档,在body标签中添加一个div,然后在这个div中再添加一个div,这时默认情况下内div在外div的左上角:2、为内div添加“...

  • html中设置锚点定位的几种常见方法
  • 答:如:<div><a href="#a01"></a></div> <p>练习</p><p>练习</p><p>练习</p><p>练习</p><p>练习</p> <p id="a01">练习</p> 这样的定位可以针对任何标签来定位。2、方法二:给a标签的文本添加锚点...

  • html中的定位问题
  • 答:<html><head><style> #box1{psoition:relative} #box2{psoition:absolute;top:10px;left:10px;}</style> </head><body><div id="box1" style="width: 500px;height: 500px;background-color: red"> ...

  • HTML+CSS中关于绝对定位和相对定位定位的优缺点以及该注意的地方,现在...
  • 答:哥们,这个问题是不能这么问的,语言都是根据需求设计出来的。都有用处。你自己用得多了就明白了。一般绝对定位经常是需要有相对定位的辅助的,绝对定位默认是根据<body>来计算位置的,而往往网页写的时候经常并不能明确的...

  • 在html页面点击按钮时如何获取当前地理位置,如图:
  • 答:在支持html5地理定位API的浏览器上,window.navigator对象新增了一个geolocation属性,以及相关的Geolocation API。都是用JS进行访问的。下面是一个例子:<!doctype html><html lang="en"><head> <meta charset="UTF-8"...

  • 如何在HTMl中实现元素的精确定位
  • 答:2、实现效果的方法有很多,尽量用科学合理的方法。比如你的这个input,你是用input去贴合一整张大背景图片。但其实可以把你的这个图片中输入框的部分单独做成图片,然后在input的样式表里定义背景。这样就算input跑偏了,也不...

  • html怎么在div里面给标签定位
  • 答:1.3.生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。--->position:absolute;1.4.默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。--->position...

  • 关于html div绝对位置问题
  • 答:<div class="div4"></div> </div></body></html> 建议你理解一下DIV绝对定位 和 相对定位 的区别 和作用,在以后的页面布局都会用到!去w3cschool上看一下练习,很快就能理解!望采纳!

    为传递更多家电数码信息,若有事情请联系
    数码大全网