1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的body标签中，输入html代码：。
div style="border: 1px solid blueposition:relativewidth: 200pxheight: 80px"
div style="border: 1px solid bluetop: 19pxleft: 49pxposition:absolutewidth: 100pxheight: 40px"/div
/div
3、浏览器运行index.html页面，此时一个盒子放在了另一个盒子的正中央。
html怎么获取盒子当前位置
盒子的offsetTop和offsetLeft，就可以锁定盒子距离上边的值和距离左边的值
html怎么让盒子靠左边
css属性
float:left
但是要注意浮动后,下边没浮动的盒子就会插到浮动的盒子下边
html中导航栏滑动时不会超过盒子的固定位置
解决方法:
1.html和body的高度设置100%，为当前屏幕的高度，container高度也设置为100%，这样就继承了当前屏幕的高度.
2.上下两个导航栏固定定位,脱离了文档流,需要占位处理
3.将container设置为flex布局，换轴，因为上下两端有了占位，直接将main高度设置为100%
4.main设置overflow：auto超出部分显示滚动条。
html如何调整盒子中文字的位置
在style里面设置文字的宽高，最好设置一下文字和背景的颜色（不相同）方便查看，然后用line-hight: px,调整文字在盒子里面的显示方式
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {position: relativeborder: 1px solid greenwidth: 200pxheight: 80px}
span {position: absolutebottom: 0}
3、浏览器运行index.html页面，此时成功实现了“文本”2个文字放到绿色div框的左下角。
