技術(shù)資訊
DIV懸浮的代碼
2012-05-19 00:32:29
讓一個(gè)層疊加在另一個(gè)層上 如果是這樣的話 你可以利用相對(duì)定位和絕對(duì)定位來(lái)實(shí)現(xiàn)
比如: 你在父元素上設(shè)置position:relative; 在子元素上設(shè)置position:absolute;top:10px;left:10px;
這樣如果父元素里面有其他元素的話 上面定義的這個(gè)子元素就可以"懸浮"在他上面了
如果你說(shuō)的懸浮是一個(gè)元素固定在窗口的某個(gè)位置 拉滾動(dòng)條他也不動(dòng) 哪么你可以使用固定定位
比如:你在需要懸浮的元素上設(shè)置position:fixed; top:10px;left:10px; 看下效果 你就明白了
可參考手冊(cè):
語(yǔ)法:
position : static | absolute | fixed | relative
取值:
static : 默認(rèn)值。無(wú)特殊定位,對(duì)象遵循HTML定位規(guī)則
absolute : 將對(duì)象從文檔流中拖出,使用 left , right , top , bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象,則依據(jù) body 對(duì)象。而其層疊通過 z-index 屬性定義
fixed : 未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范
relative : 對(duì)象不可層疊,但將依據(jù) left , right , top , bottom 等屬性在正常文檔流中偏移位置
說(shuō)明:
檢索對(duì)象的定位方式。
設(shè)置此屬性值為 absolute 會(huì)將對(duì)象拖離出正常的文檔流絕對(duì)定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對(duì)象已經(jīng)占據(jù)了給定的位置,他們之間不會(huì)相互影響,而會(huì)在同一位置層疊。此時(shí)對(duì)象不具有外補(bǔ)丁( margin ),但仍有內(nèi)補(bǔ)丁( padding )和邊框( border )。
要激活對(duì)象的絕對(duì)(absolute)定位,必須指定 left , right , top , bottom 屬性中的至少一個(gè),并且設(shè)置此屬性值為 absolute 。否則上述屬性會(huì)使用他們的默認(rèn)值 auto ,這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則,在前一個(gè)對(duì)象之后立即被呈遞。
設(shè)置此屬性值為 relative 會(huì)保持對(duì)象在正常的HTML流中,但是它的位置可以根據(jù)它的前一個(gè)對(duì)象進(jìn)行偏移。在相對(duì)(relative)定位對(duì)象之后的文本或?qū)ο笳加兴麄冏约旱目臻g而不會(huì)覆蓋被定位對(duì)象的自然空間。與此不同的,在絕對(duì)(absolute)定位對(duì)象之后的文本或?qū)ο笤诒欢ㄎ粚?duì)象被拖離正常文檔流之前會(huì)占有它的自然空間。放置絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外,滾動(dòng)條不會(huì)出現(xiàn)。
內(nèi)容的尺寸會(huì)根據(jù)布局確定對(duì)象的尺寸。例如,設(shè)置一個(gè) div 對(duì)象的 height 和 position 屬性,則 div 對(duì)象的內(nèi)容將決定它的寬度( width )。
此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
對(duì)應(yīng)的腳本特性為 position 。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2015-05-23 19:25:16] 2015年網(wǎng)站設(shè)計(jì)趨勢(shì)
- [2014-11-17 09:09:35] 非常有創(chuàng)意Flash網(wǎng)站
- [2016-09-09 23:55:00] 通過robots.txt看到網(wǎng)站后臺(tái)目錄
- [2011-11-27 22:47:04] 什么是面包屑導(dǎo)航?
- [2012-02-19 21:01:54] 網(wǎng)頁(yè)設(shè)計(jì)如何傳達(dá)信息
- [2011-10-16 13:41:34] 青島網(wǎng)站制作之SEO標(biāo)題關(guān)鍵詞的深度挖掘
- [2013-01-26 15:07:29] dede圖集大圖絕對(duì)路徑
- [2011-11-04 15:14:32] 網(wǎng)站被K后怎么辦 以及應(yīng)對(duì)經(jīng)驗(yàn)總結(jié)
- [2011-10-20 16:45:44] 在青島網(wǎng)站設(shè)計(jì)中套用網(wǎng)站模板的弊端有哪些?
- [2014-10-29 09:08:30] 網(wǎng)頁(yè)的設(shè)計(jì)中應(yīng)注意內(nèi)容、功能、表現(xiàn)三個(gè)方面
- [2011-12-27 19:20:52] UCenter與微博整合教程
- [2012-06-22 00:35:55] DEDE當(dāng)前位置鏈接用默認(rèn)網(wǎng)址
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
集團(tuán)公司網(wǎng)站建設(shè) 青島黃島、紅島網(wǎng)站建設(shè)公司 舒適的界面 力圖數(shù)字科技 海信網(wǎng)絡(luò)科技 新的元素 網(wǎng)站策劃 營(yíng)銷型網(wǎng)站 H5定制設(shè)計(jì) 網(wǎng)站規(guī)劃 青島海洋投資集團(tuán) 網(wǎng)站設(shè)計(jì) 青島高端網(wǎng)站建設(shè) php程序 官網(wǎng)網(wǎng)站建設(shè) 企業(yè)網(wǎng)站為什么要備案 SEO 空白和簡(jiǎn)潔的設(shè)計(jì) 企業(yè)網(wǎng)站建設(shè) 官網(wǎng)建設(shè) 網(wǎng)站設(shè)計(jì)趨勢(shì) 網(wǎng)站推廣 頁(yè)面設(shè)計(jì) 營(yíng)銷型網(wǎng)站建設(shè) H5專題頁(yè)面 中小型企業(yè)網(wǎng)站建設(shè) html和css 版面布局 青島網(wǎng)站案例 企業(yè)網(wǎng)站