css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）-css教學-PHP中文網

首頁

web前端

css教學

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

青灯夜游

Sep 07, 2018 am 11:13 AM

cssposition定位

這篇文章帶給大家的內容是關於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 id="position-nbsp-static">position: static;</h2>
			<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
			<div class="static">
				该元素使用了 position: static;
			</div>
		</div>
	</body>

</html>

下面是效果圖：

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

#二：相對定位（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 id="position-nbsp-relative">position: relative;</h2>
			<div class="box1">正常位置的盒子</div>
			<div class="box2">相对于其正常位置向左移动的盒子</div>
			<div class="box3">相对于其正常位置向右移动的盒子</div>

		</div>
	</body>

</html>

下面是效果圖：

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

相對定位元素經常被用來作為絕對定位元素的容器區塊。

三：絕對定位（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 id="position-nbsp-absolute">position: absolute;</h2>
			<div class="div1">
			父元素
			    <div class="div2">子元素</div>
			</div>

		</div>
	</body>

</html>

下面是效果圖：

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

#四、固定定位（fixed）

#固定定位與絕對定位類似，但它是相對於瀏覽器視窗定位，並且不會隨著捲軸進行捲動。

固定定位的最常見的一種用途是在頁面中建立一個固定頭部、固定腳部或固定側邊欄，不需要使用margin、border、padding。本元素需要設定position為fixed。

那麼以上就是關於css使用position屬性達到定位效果的具體用法介紹，具有一定的參考價值，希望對有需要的朋友有所幫助！

以上是css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

解决Go语言开发中的内存泄漏定位问题的方法Jul 01, 2023 pm 12:33 PM

解决Go语言开发中的内存泄漏定位问题的方法内存泄漏是程序开发中常见的问题之一。在Go语言开发中，由于其自动垃圾回收机制的存在，内存泄漏问题相对其他语言来说可能较少。然而，当我们面对大型复杂的应用程序时，仍然可能会出现内存泄漏的情况。本文将介绍一些在Go语言开发中定位和解决内存泄漏问题的常用方法。首先，我们需要了解什么是内存泄漏。简单来说，内存泄漏指的是程序中

H5中position属性的灵活运用技巧Dec 27, 2023 pm 01:05 PM

H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性

CSS 布局属性优化技巧：position sticky 和 flexboxOct 20, 2023 pm 03:15 PM

CSS布局属性优化技巧：positionsticky和flexbox在网页开发中，布局是一个非常重要的方面。良好的布局结构可以提高用户体验，使页面更加美观和易于导航。而CSS布局属性则是实现这一目标的关键。在本文中，我将介绍两种常用的CSS布局属性优化技巧：positionsticky和flexbox，并提供具体的代码示例。一、positions

html怎样把div放在底部Mar 02, 2021 pm 05:44 PM

html把div放在底部的方法：1、使用position属性将div标签相对于浏览器窗口进行定位，语法“div{position:fixed;}”；2、设置到底部距离为0来把div永远放置于页面底部，语法“div{bottom:0;}”。

h5如何使用positionDec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。

怎样发位置给别人Jun 27, 2023 am 10:13 AM

发位置给别人的方法是：1、使用手机地图发位置，分享界面上选择合适的通讯应用或者社交媒体，将位置信息发送给需要的人；2、使用第三方位置分享工具，实现设备之间的位置共享；3、利用Wi-Fi，蓝牙和Beacon技术发位置。

position有哪些属性Oct 10, 2023 am 11:18 AM

position属性取值有static、relative、absolute、fixed和sticky等。详细介绍：1、static是position属性的默认值，表示元素按照正常的文档流进行布局，不进行特殊的定位，元素的位置由其在HTML文档中的先后顺序决定，无法通过top、right、bottom和left属性进行调整；2、relative是相对定位等等。

如何在uniapp中实现百度地图定位Jul 04, 2023 pm 12:07 PM

如何在UniApp中实现百度地图定位引言：UniApp是一款基于Vue.js的开发框架，可以用于快速开发跨平台的应用程序。在今天的数字化时代，地图定位功能已经成为许多应用程序的重要组成部分。本文将教您如何在UniApp中使用百度地图定位功能，并提供相应的代码示例。一、准备工作在开始之前，我们需要进行一些准备工作。首先，您需要在百度开发者平台注册一个开发者账号

See all articles