css如何使用position 属性实现定位效果？css中的4种定位方法介绍（实例）
本篇文章给大家带来的内容是关于css如何使用position 属性实现定位效果？css中的4种定位方法介绍（实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css中定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。下面开始介绍如何使用css position属性实现定位效果。
一：静态定位（static）
元素按照其在 HTML 中的位置顺序决定排布的过程，默认定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。本元素需要设置position为static。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(静态定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.static {
position: static;
border: 3px solid #007AFF;
}
</style>
</head>
<body>
<div class="box">
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</div>
</body>
</html>下面是效果图：
二：相对定位（relative）
相对定位被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动top,left,bottom,right都可以有值。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的页面空间，可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(相对定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.box1{
background-color: red;
width:100px;
height:100px;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
position: relative;
left: 20px;
}
.box3{
background-color: blue;
width:100px;
height:100px;
position: relative;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>position: relative;</h2>
<div class="box1">正常位置的盒子</div>
<div class="box2">相对于其正常位置向左移动的盒子</div>
<div class="box3">相对于其正常位置向右移动的盒子</div>
</div>
</body>
</html>下面是效果图：
相对定位元素经常被用来作为绝对定位元素的容器块。
三：绝对定位（absolute）
将被赋予绝对定位的元素从它在普通流中的位置中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。
绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(绝对定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
}
.div1 {
width: 150px;
height: 150px;
background: yellow;
}
.div2 {
width: 150px;
height: 150px;
background: red;
top: 150px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<h2>position: absolute;</h2>
<div class="div1">
父元素
<div class="div2">子元素</div>
</div>
</div>
</body>
</html>下面是效果图：
四、固定定位（fixed）
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。本元素需要设置position为fixed。
那么以上就是关于css使用position属性达到定位效果的具体用法介绍，具有一定的参考价值，希望对有需要的朋友有所帮助！
以上是css如何使用position 属性实现定位效果？css中的4种定位方法介绍（实例）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
