心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html定位

发布时间：2022-06-30 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html定位，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1绝对定位

 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝度定为的元素不会占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素，如果当前需要被定位的元素没有已定位的祖先作为参考值则相对于整个页面。

position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #daHe{
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
        }
        #xiaoHe{
            width: 50px;
            height: 50px;
            background: #3388ff;
            position: absolute;
            top: 10px;
            left:10px;
        }

    </style>
</head>
<body>
<div id="daHe">
    <div id="xiaoHe"></div>
</div>
</body>
</html>

代码效果如下

html定位

 蓝色的盒子相对于绿色盒子而言距离绿色盒子左边10px,距离上部10px.

2相对定位

position:relative

相对定位与绝对定位的区别在于它的参照点不是在左上角的原点，而是该元素本身的起点位置，并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #daHe{
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>
<div id="daHe">

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

代码效果如下

html定位

 

3固定定位

position:fixed

固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告，如果你不差掉它，当时滑动鼠标查看网页时，小广告一直会在那里，还有常用的就是网站或者APP的导航栏和底部的选择栏。

 

脚本宝典总结

以上是脚本宝典为你收集整理的html定位全部内容，希望文章能够帮你解决html定位所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程