css樣式元素的相對定位，絕對定位，固定定位等元素定位運用技巧詳解

文章目錄

  • 1.相對定位 relative
  • 2.絕對定位 absolute
  • 3.固定定位
  • 4.display 轉換元素
  • 5.float浮動
  • 6.float產生內容塌陷問題
  • 7.overflow

CSS樣式學習寶典，關注點贊加收藏，防止迷路哦

在CSS中關于定位的內容是：position:relative | absolute | static | fixed。static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。在文本流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產生位置移動。

1.相對定位 relative

定位的種類，默認是static
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位:相對定位 relative</title><style>.gg{width:200px;height:200px;border:solid 1px red;}.c1{background:violet;}.c2{background:tan;position:relative;top:10px;left:100px;z-index:2;}.c3{background:blue;}.c4{background:green;}</style>
</head>
<body><!-- 相對定位: 參考點是他自己本身,相對于原始的位置進行定位，本身原始位置指的是盒子設置好后，默認在瀏覽器的位置;如果添加了定位:無論是添加(相對,絕對,固定)屬性,添加之后會增加額外的其他屬性:z-index 控制層疊關系: 值越大越在上層,值越小越在下層同一個層疊上下文中，層疊級別相同的兩個元素，依據它們在HTML文檔流中的順序，寫在后面的將會覆蓋前面的。 不同層疊上下文中，元素的顯示順序依據祖先的層疊級別來決定，與自身的層疊級別無關。 lefttoprightbottom z-indexz-index 控制層疊關系: 值越大越在上層,值越小越在下層，默認是0

在這里插入圖片描述

        --><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div></body>
</html>

2.絕對定位 absolute

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位:絕對定位 absolute</title><style>.gg{width:200px;height:200px;border:solid 1px red;}.big{width:1000px;height:1000px;border:solid 1px red;margin:100px 220px;}.c1{background:violet;/* 無效 */position: relative; }.c2{background:tan;position: absolute;top:0px;left:0px;/* bottom:0px;right:0px; *//* z-index:-1; */}.c3{background:blue;}.c4{background:green;}</style>
</head>
<body><!-- 絕對定位:參考點默認參考的是body 效果:脫離文檔流,后面的內容自動補位使用:絕對定位會參照父級的相對定位進行移動,如果父級中沒有relative,相對于body進行定位;(1)把想要的父級元素變成relative(2)把要定位的元素變成 absolute--><div class="big"><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div></div></body>
</html>

父級沒有relative，設置了absolute的元素會相對body進行定位
在這里插入圖片描述
在這里插入圖片描述

3.固定定位

fixed固定頁面，滑動頁面該位置不動

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位:固定定位 fixed</title><style>/* *號代表通配選擇符,代表所有標簽,默認標簽中含有默認的間距,要在一開始的時候全部去掉; */
默認標簽離左邊欄有間距

在這里插入圖片描述

    *{margin:0px;padding:0px;}

加上* 所有通配符設置間距為0，離左邊欄不再有間距
在這里插入圖片描述

body
{height:2000px;}
.c1
{width:500px;height: 600px;border:solid 1px red;background-color: green;position: fixed;/* 相對于左上角定點進行定位 */left:50%;margin-left:-250px;top:50%;margin-top:-300px;
}

在這里插入圖片描述
在這里插入圖片描述

把多移動的移回來
在這里插入圖片描述

然后才能居中
在這里插入圖片描述

      過度屬性/* <' transition-property '>： 檢索或設置對象中的參與過渡的屬性 <' transition-duration '>： 檢索或設置對象過渡的持續時間 <' transition-timing-function '>： 檢索或設置對象中過渡的動畫類型 <' transition-delay '>： 檢索或設置對象延遲過渡的時間  */img{position:fixed;bottom:20px;left:-100px; transition: all 1s ease 0.1s;           }img:hover{left:0px;background-color: red;}</style>
</head>
<body><img src="images/xiao.jpg"/><div class="c1">我沒動</div><p>1111222333444</p></body>
</html>

4.display 轉換元素

行內，塊狀，行內塊狀元素之間的轉換
使用語法：
display : 要轉換的元素類型（block inline inline-block）
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>display 轉換元素</title><style>div/* display:inline; 轉換成行內元素 */{display:inline;border:solid 1px red;width:1000px;height:20px;}
將塊狀元素設置成行內元素后，設置的高和寬已失效

在這里插入圖片描述

        span/* display:block; 轉換成塊狀元素 */{display:block;width:100px;height:50px;border:solid 1px red;}
行內元素轉換成塊狀元素后，可以設置高和寬，并且獨占一行

在這里插入圖片描述

        a/* display:inline-block; 轉換成行內塊狀元素 */{display:inline-block;width:500px;height:30px;border:solid 1px red;}     
行內元素轉換成行內塊狀元素，可以設置高和寬

在這里插入圖片描述

        p/* display:none 隱藏元素 */{display:none;}
p元素隱藏了

在這里插入圖片描述

    </style></head>
<body><!-- 元素的分類:塊狀元素 : block行內元素 : inline行內塊狀元素  : inline-block--><div>第一個div</div><div>第二個div</div><span>我是span1</span><span>我是span2</span><a href="#">我是鏈接1</a><a href="#">我是鏈接2</a><p>12345</p>
</body>
</html>

5.float浮動

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>float 浮動</title><style>.content{width:700px;clear:both;}.content .c1{background: red;width:100px;height:100px;float:left;}.content .c2{background: tan;width:100px;height:100px;float:left;}.content .c3{background:blue;width:100px;height:100px;float:left;}.content .c4{background:green;width:100px;height:100px;float:left;}div默認是從上到下，垂直排列，使用float之后，從左向右橫向排列
是設置了float下面的元素脫離文檔流，壓在了設置float元素的下面

在這里插入圖片描述

.content2
{width:700px;height:500px;border:solid 1px red;clear:both;}#a1
{float:left;width:100px;height:100px;border:solid 1px red;}
#a2
{display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}

不加clear:both，a2設置的屬性沒顯示出來
在這里插入圖片描述
在這里插入圖片描述

加了clear:both。顯示正常
在這里插入圖片描述

    </style>
</head>
<body><!-- # ###塊狀元素浮動:float:left  向左浮動  ,元素脫離原始文檔流,后面的內容自動補齊;float:right 向右浮動  ,元素脫離原始文檔流,后面的內容自動補齊;目的: 讓塊狀元素在一排顯示 clear:both; 清除兩邊的浮動  在不需要浮動的地方加--><div class="content"><div class="c1"></div><div class="c2"></div><div class="c3"></div><div class="c4"></div></div><!-- # ###行內元素浮動:如果對行內元素進行浮動:默認會把行內元素升級成行內塊狀元素,可以設置寬和高 消除浮動產生的影響:clear:both;--><div class="content2"><a href="#" id="a1">點擊我跳轉1</a><a href="#" id="a2">點擊我跳轉2</a></div>
</body>
</html>

6.float產生內容塌陷問題

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>float 會產生內容塌陷問題</title><style>.content{border:solid 1px red;}.gg{width:150px;height:150px;border:solid 1px red;float:left;}.c1{background: thistle;}.c2{background: yellowgreen;}.c3{background: blue;}.c4{background: green;}

大div里面幾個小div浮動，導致大盒子沒撐開
在這里插入圖片描述
在這里插入圖片描述

解決辦法一：在html里面解決
在小div里面增加一個div 只設置style clear:both
在這里插入圖片描述
在這里插入圖片描述

.content2
{border:solid 1px red;}
.content2::after
{content:"";display:block;clear:both;
}

解決方法二：在CSS里面通過偽對象來解決
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

    </style>
</head>
<body><!-- 解決方法一 --><div class="content"><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div><div style="clear:both;"></div></div><!-- 解決方法二 --><div class="content2"><div class="c1 gg"></div><div class="c2 gg"></div><div class="c3 gg"></div><div class="c4 gg"></div></div>
</body>
</html>

7.overflow

對超出部分內容的處理
在這里插入圖片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.test {overflow: hidden;width: 200px;height: 100px;background: #eee;}</style></head><body><!-- overflow:hidden 對超出部分內容進行隱藏 --><div class="test"><p>蘇打速度</p><p>蘇打速度</p><p>蘇打速度</p><p>蘇打速度</p><p>蘇打速度</p></div></body>
</html>

對于超過邊界的內容，默認是visible 對超出邊框的內容不做處理，顯示出來。這樣很不美觀
在這里插入圖片描述
在這里插入圖片描述

對超出的內容可以設置隱藏，或者滾動條顯示auto：當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。此為body對象和textarea的默認值。
在這里插入圖片描述
在這里插入圖片描述

hidden:隱藏溢出的內容
在這里插入圖片描述
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/718500.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/718500.shtml
英文地址，請注明出處：http://en.pswp.cn/news/718500.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Unreal觸屏和鼠標控制旋轉沖突問題

Unreal觸屏和鼠標控制旋轉沖突問題

Unreal觸屏和鼠標控制旋轉沖突問題 鼠標控制攝像機旋轉添加Input軸計算旋轉角度通過軸事件控制旋轉 問題和原因問題原因 解決辦法增加觸摸控制旋轉代碼觸屏操作下屏蔽鼠標軸響應事件 鼠標控制攝像機旋轉 通過Mouse X和Mouse Y控制攝像機旋轉。 添加Input軸 計算旋轉角度 通過…
閱讀更多...
SpringBootWeb快速入門

SpringBootWeb快速入門

1.創建springboot工程&#xff0c;新建module 2.勾選web開發相關依賴 3.刪除多余文件 4.新建類 5.啟動類中運行main方法 6.啟動 默認端口號8080 7.打開瀏覽器&#xff0c;地址欄輸入 8.報錯 9.原因&#xff0c;控制層位置放錯&#xff0c;剪切controller層放進com.example …
閱讀更多...
[vue error] TypeError: Components is not a function

[vue error] TypeError: Components is not a function

問題詳情 問題描述: element plus按需導入后&#xff0c;啟動項目報錯&#xff1a; 問題原因 unplugin-vue-components插件版本問題 查看 unplugin-vue-components插件可以發現版本太高了 問題解決 unplugin-vue-components 版本高了&#xff0c;我用的0.26.0&#xff0c…
閱讀更多...
AI寫的wordpress網站首頁模板 你覺得怎么樣？

AI寫的wordpress網站首頁模板 你覺得怎么樣？

以下是一個AI寫的基本的首頁模板示例&#xff0c;包含您提到的各個模塊。請注意&#xff0c;這只是一個基本框架&#xff0c;您可能需要根據您的具體需求進行進一步的定制和調整。 <!DOCTYPE html> <html <?php language_attributes(); ?>> <head>&…
閱讀更多...
【STM32+HAL】姿態傳感器陀螺儀MPU6050模塊

【STM32+HAL】姿態傳感器陀螺儀MPU6050模塊

一、準備工作 有關OLED屏初始化的問題&#xff0c;詳見【STM32HAL】OLED顯示初始化配置 二、所用工具 1、芯片&#xff1a;STM32F10C8T6 2、CUBEMX配置軟件 3、 6 軸運動處理組件MPU6050 三、實現功能 OLED屏顯示姿態角 四、HAL配置步驟 1、開啟I2C1進行MPU6050通信 2、開…
閱讀更多...
供應鏈管理（SCM）：界面設計全面掃盲，得供應鏈者得天下

供應鏈管理（SCM）：界面設計全面掃盲，得供應鏈者得天下

大家伙&#xff0c;我是大千UI工場&#xff0c;專注UI分享和項目接單&#xff0c;本期帶來供應鏈系統的設計分享&#xff0c;歡迎大家關注、互動交流。 一、什么是SCM SCM系統是供應鏈管理&#xff08;Supply Chain Management&#xff09;系統的縮寫。供應鏈管理是指協調和管…
閱讀更多...
計算機視覺 了解OpenCV、COLMAP、PyTorch3D 和 OpenGL 中坐標系3D轉換的簡要指南

計算機視覺 了解OpenCV、COLMAP、PyTorch3D 和 OpenGL 中坐標系3D轉換的簡要指南

一、簡述 由于坐標系不同，在OpenCV、COLMAP、PyTorch3D和OpenGL等 3D 框架的世界中進行轉換可能會令人覺得頭疼。這里比較它們的坐標系并提供它們之間轉換的示例。核心還是找到在這些不同的 3D 環境中無縫工作所需的知識，讓我們以清晰直接的方式探索和理解這些坐標系。 2D 成…
閱讀更多...
【筆記版】edgecore.yaml分析總結

【筆記版】edgecore.yaml分析總結

1. 文件路徑 /etc/kubeedge/config edgecore.yaml是該目錄下唯一的文件 附上鏈接&#xff1a;edgecore.yaml 2. 文件生成方式 2.1 方式一 使用keadm安裝部署的方式&#xff0c;執行完keadm join --cloudcore-ipportcloudcore監聽的IP地址:端口&#xff08;默認為10002&…
閱讀更多...
題目 1431: 藍橋杯第五屆真題-分糖果

題目 1431: 藍橋杯第五屆真題-分糖果

題目描述: 有n個小朋友圍坐成一圈。老師給每個小朋友隨機發偶數個糖果&#xff0c;然后進行下面的游戲&#xff1a; 每個小朋友都把自己的糖果分一半給左手邊的孩子。 一輪分糖后&#xff0c;擁有奇數顆糖的孩子由老師補給1個糖果&#xff0c;從而變成偶數。 反復進行這個游戲…
閱讀更多...
設計模式精解：GoF 23種設計模式全解析

設計模式精解：GoF 23種設計模式全解析

在軟件工程中&#xff0c;設計模式是為了解決常見的軟件設計問題而形成的一套經典解決方案。這些模式不僅能夠幫助開發者提高設計的靈活性和代碼的重用性&#xff0c;還能使問題的解決方案更加清晰、易于理解。《設計模式精解&#xff0d;GoF 23種設計模式》一書中所列舉的23種…
閱讀更多...
微信小程序的單位

微信小程序的單位

在小程序開發中&#xff0c;rpx是一種相對長度單位&#xff0c;用于在不同設備上實現自適應布局。它是微信小程序特有的單位&#xff0c;表示屏幕寬度的 1/750。 rpx單位的好處在于可以根據設備的屏幕寬度進行自動換算&#xff0c;使得頁面在不同設備上保持一致的顯示效果。例…
閱讀更多...
學習筆記 前端

學習筆記 前端

學習筆記 前端 學習記錄nodejsyarn解決方法 學習記錄 nodejs yarn 描述&#xff1a;想體驗一下chatgptnextweb在本地部署&#xff0c;但是本地部署需要yarn環境&#xff0c;網上看了yarn在node16以上就自帶了&#xff0c;而我的電腦是node18&#xff0c;所以就直接輸入了ya…
閱讀更多...
(十)SpringCloud系列——openfeign的高級特性實戰內容介紹

(十)SpringCloud系列——openfeign的高級特性實戰內容介紹

前言 本節內容主要介紹一下SpringCloud組件中微服務調用組件openfeign的一些高級特性的用法以及一些常用的開發配置&#xff0c;如openfeign的超時控制配置、openfeign的重試機制配置、openfeign集成高級的http客戶端、openfeign的請求與響應壓縮功能&#xff0c;以及如何開啟…
閱讀更多...
論文閱讀-高效構建檢查點

論文閱讀-高效構建檢查點

論文標題&#xff1a;On Efficient Constructions of Checkpoints 摘要 高效構建檢查點/快照是訓練和診斷深度學習模型的關鍵工具。在本文中&#xff0c;我們提出了一種適用于檢查點構建的有損壓縮方案&#xff08;稱為LC-Checkpoint&#xff09;。LC-Checkpoint同時最大化了…
閱讀更多...
MFC中CString的MakeUpper使用方法

MFC中CString的MakeUpper使用方法

在MFC中&#xff0c;CString類提供了MakeUpper函數來將字符串中的字符全部轉換為大寫。MakeUpper函數沒有參數&#xff0c;它會直接修改原始的CString對象。 下面是一些示例代碼&#xff0c;演示了如何使用MakeUpper函數&#xff1a; CString str "Hello, World!"…
閱讀更多...
uniapp開發android原生插件

uniapp開發android原生插件

一、下載原生開發SDK Android 離線SDK - 正式版 | uni小程序SDK (dcloud.net.cn)、 https://nativesupport.dcloud.net.cn/AppDocs/download/android.html 將開發uniappa原生android的插件解壓到ben本地目錄&#xff0c;目錄結構如下&#xff1a; 接下就可以使用 UniPlugin-Hel…
閱讀更多...
【本科組冠名獎】2023年第八屆數維杯數學建模挑戰賽獲獎感言

【本科組冠名獎】2023年第八屆數維杯數學建模挑戰賽獲獎感言

美國大學生數學建模競賽已結束過半&#xff0c;現在又迎來了2024年第九屆數維杯國賽&#xff0c;準備參加今年數維杯國賽的同學&#xff0c;今天我們一起看看去年優秀的選手都有什么獲獎感言吧~希望能幫到更多熱愛數學建模的同學。據說文末在看點贊的大佬都會直沖國獎呢&#x…
閱讀更多...
實用Pycharm插件

實用Pycharm插件

Pycharm的離線安裝&#xff1a;https://plugins.jetbrains.com/ 需要根據對應的Pycharm/Goland版本選取所需的 對于實用的插件如下&#xff1a; 實時查看每一行的git blame信息&#xff1a; Gittoolbox 轉換IDE的英文為中文&#xff1a;Chinese IDE側格式化json字符串&#…
閱讀更多...
UE5 C++ TPS開發 學習記錄(八

UE5 C++ TPS開發 學習記錄(八

這一次到了p19 完善了UI和寫了創建房間 MultiPlayerSessionSubsystem.h // Fill out your copyright notice in the Description page of Project Settings. #pragma once #include "CoreMinimal.h" #include "Subsystems/GameInstanceSubsystem.h" #in…
閱讀更多...
python基礎-基本數據類型深入-2.2

python基礎-基本數據類型深入-2.2

目錄 集合 集合的定義 集合操作 集合的內建函數 集合與內置函數 集合練習-1 集合練習-2 集合練習-3 集合 集合的定義 學習關于 Python 集的所有內容&#xff1b;如何創建它們、添加或刪除其中的元素&#xff0c;以及在 Python 中對集合執行的所有操作。 Python 中的集…
閱讀更多...
最新文章

Copyright @ 2022~2023