当前位置: 首页 > Web前端 > CSS

【前端Talking】CSS系列-深入理解CSS的相对定位

时间:2023-03-30 23:02:12 CSS

涓€銆佸墠瑷€鍦ㄥ墠涓ょ瘒鏂囩珷锛欶loat娴姩涔嬫繁鍏ョ悊瑙SS鍜岀粷瀵瑰畾浣嶄箣娣卞叆鐞嗚ВCSS涓紝float鍜宎bsolute鐨勭壒鎬у拰鐗圭偣浠嬬粛浜嗗浣曚娇鐢紝濡傛灉浣犱粩缁嗙湅浜嗚繖涓ょ瘒鏂囩珷锛岀浉淇′綘鐨凜SS鎵撴€兘鍔涘凡缁忔彁楂樹笉灏戯紝閭e氨瓒佺潃浣犳渶杩戠姸鎬佷笉閿欙紝鍒嗕韩缁欏ぇ瀹朵綘閫氬父瀛︿範鐨勪竴浜涙妧鑳姐€備竴鏂归潰鍙互瀵硅嚜宸辩殑鎶€鑳芥湁涓€荤粨锛岀湅鑷繁鏄惁鐞嗚В閫忓交銆傚彟涓€鏂归潰锛屼互鏂囩珷鐨勫舰寮忓垎浜紝鍙栨偊鑷繁锛屽彇鎮︿粬浜恒€傚ソ浜嗭紝杩涘叆浠婂ぉ鐨勬棰橈紝浠婂ぉ杞埌鍙︿竴涓畾浣嶅睘鎬р€斺€旂浉瀵癸紝澶у榧撴帉娆㈣繋馃憦馃憦馃憦銆?.relative鐨勭壒鐐筊elative锛岄【鍚嶆€濅箟锛屽氨鏄浉瀵圭殑銆傚湪CSS涓紝鎴戜滑閮芥槸杩欐牱浣跨敤鐨勶細position:relative锛岀炕璇戞垚涓枃灏辨槸鐩稿瀹氫綅銆備笉鐭ラ亾澶у鍦ㄤ娇鐢ㄧ殑杩囩▼涓湁娌℃湁鎯宠繃杩欐牱涓€涓棶棰橈細鐩稿浜庤皝鏉ュ畾浣嶏紵鍦ㄦ彮鏅撶瓟妗堜箣鍓嶏紝鎴戜滑杩樻槸鐢ㄤ竴涓緥瀛愭潵璇存槑闂銆?!--HTML浠g爜-->

浣跨敤杈硅窛

浣跨敤relative

鐩存帴鏌ョ湅鏍稿績CSS浠g爜锛?*CSS浠g爜*/.element1{margin-top:-30px;}.element2{position:relative;top:-30px}鍦ㄦ祻瑙堝櫒涓殑鏁堟灉濡備笅锛氭湰渚嬩腑浣跨敤.element1鍜?element2杩欎袱涓狢SS绫诲疄鐜扮殑鏁堟灉鏄笉涓€鏍风殑鍚岀悊锛屾敼鍙榤argin鍊间负璐熺殑鍏冪礌鐨勪綅缃悗锛屽悗闈㈠厓绱犵殑position浼氱浉搴旀敼鍙橈紝鏀瑰彉position:relative鍜宼op涓鸿礋鍊肩殑鍏冪礌鐨勪綅缃椂锛屽悗闈㈠厓绱犵殑position涓嶄細鏀瑰彉銆傚叾瀹炶繖涓緥瀛愯鏄庝簡鐩稿瀹氫綅鐨勪袱澶х壒鐐癸細1锛夌浉瀵逛簬鑷韩銆備娇鐢╮elative瀹氫綅鐨勫厓绱犵浉瀵逛簬鑷韩鏈夊亸绉汇€?)闈炰镜鍏ユ€с€備娇鐢╮elative瀹氫綅鐨勫厓绱犲彲浠ョ悊瑙d负涓€涓€滃够褰扁€濓紝瀹冪殑鐪熻韩杩樺湪鍘熸潵鐨勪綅缃紝涓嶄細褰卞搷椤甸潰鍏朵粬鍏冪礌鐨勫竷灞€銆傚湪杩欎釜渚嬪瓙涓紝鍗曡瘝relative浠嶇劧鍦ㄥ師鏉ョ殑浣嶇疆锛岃€屽崟璇峬argin鍋忕浜嗗師鏉ョ殑浣嶇疆銆?.relative鐨勯檺鍒朵綔鐢?.1relative瀵筧bsolute鐨勯檺鍒朵綔鐢ㄦ垜浠煡閬揳bsolute瀹氫綅鐨勬槸鍏跺畾浣嶅睘鎬т笉鏄痵tatic灞炴€х殑绗竴涓鍏堝厓绱犮€傚鏋滄病鏈塺elative鎴栬€協ixed瀹氫綅锛屾坊鍔爐op/left锛宺ight/bottom绛夊睘鎬у彲浠ュ亸绉伙紝濡備笅锛歱osition:absolute;椤堕儴锛?0px锛涘乏锛?0px锛涜繖鏃跺€檃bsolute鍏冪礌浼氬揩閫熷畾浣嶅埌娴忚鍣ㄥ乏渚?0涓儚绱犲拰鍓?0涓儚绱犮€備絾鏄鏋滃姞涓妏osition:relative鐩稿浜庣埗鍏冪礌锛宎bsolute鐨勫亸绉昏兘鍔涘彈闄愪簬鐖跺厓绱狅紝濡備笅鍥撅細3.2Relative瀵筼verflow鐨勯檺鍒剁洿鎺ョ湅涓嬮潰鐨勪緥瀛愶細.box{婧㈠嚭锛氶殣钘忥紱瀹藉害锛?0px锛涢珮搴︼細50px锛涜儗鏅壊锛?dddddd;}.son{浣嶇疆锛氱粷瀵癸紱瀹藉害锛?00px锛涢珮搴︼細100px锛沚ackground-color:#cd0000;}鏈緥涓?box鐨勫楂樺潎涓?0px锛?son鍏冪礌鐨勫楂樺潎涓?00px銆傝櫧鐒剁粰.box鍏冪礌璁剧疆浜唎verflow:hidden锛屼絾鏄粛鐒朵笉鑳介檺鍒?son鍏冪礌鐨勫ぇ灏忋€傚畠鐨勫楂橀兘鏄?00px锛岀粰.box璁剧疆浜嗗畾浣嶅睘鎬elative鍚庯紝.son鍏冪礌鐨勫楂樺氨涔栦箹鍙樻垚浜?0px銆傚涓嬪浘鎵€绀猴細3.3relativetolayerz-index鐨勯檺鍒跺皢瀹氫綅鍏冪礌鐨剒-index鍊艰缃负涓€涓€硷紝鍙互鍒涘缓涓€涓€渟tackingcontext鈥濓紙鍚庨潰鐨勬枃绔犱細璁插埌锛夈€傚湪涓嬮潰鐨勭涓€寮犲浘鐗囦腑锛岃竟璺濊缃负璐熷€笺€傝櫧鐒跺悓鏃剁粰z-index璁剧疆浜嗕竴涓€硷紝浣嗘槸鍚庨潰鐨勫厓绱犺繕鏄細瑕嗙洊鍓嶉潰鐨勫厓绱犮€傚綋娣诲姞瀹氫綅灞炴€osition:relative鏃讹紝鍒涘缓浜嗕竴涓骇鑱擟ontext锛屽墠闈㈠厓绱犵殑鍫嗗彔椤哄簭寰堥珮锛岃櫧鐒跺悓鏃惰缃簡涓€涓礋鐨刴argin鍊硷紝浣嗘槸鍚庨潰鐨勫厓绱犱粛鐒惰鐩栦笉浜嗗墠闈㈢殑鍏冪礌銆傚涓嬪浘锛?!--HTML浠g爜-->