position:fix相對父元素定位
大家都知道，當position的值為fix時，生成絕對定位的元素，相對於瀏覽器視窗進行定位。
它常常應用的場合是，當下拉滾動條時固定導航欄到頂部，將廣告固定在頁面兩側或瀏覽器中間。
如果需要將導航欄div固定到瀏覽器頂部，只需要將top設定為0即可。
如果要將廣告div固定在特定位置，只需要用js計算出div應顯示的位置，再設定top和left屬性。
當我們想要設定一個div相對於其父元素定位，大家一定會想，將父元素position設定為relative，子元素為absolute不就可以了嗎？
但有些時候，我們想要這個div相對父元素定位，要想保留fix定位的一些特徵。比如，一個父容器下有一個div，我們想將這個div固定在父容器的頂部（而不是整個瀏覽器的頂部），當拉動滾動條時它的位置不發生變化，這時應該怎麼做呢
如上圖，我們想實現的效果是，紅色部分固定在content的頂部位置，實現程式碼為
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <title> 頁面名稱 </title> 7 <style type="text/css"> 8 html, body{ 9 margin: 0; 10 padding: 0; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="par" style='margin-top:150px;background-color:blue; position: relative;height:1500px'> 16 <div id="fix" style="position: absolute;top:0px;left:60px;width:180px;background-color:red;"> 17 這個是固定的DIV18 </div> 19 20 </div> 21 <script type="text/javascript"> 22 window.onscroll = function () { 23 var fix = document.getElementById("fix"); 24 var par = document.getElementById("par"); 25 var st = document.documentElement.scrollTop || document.body.scrollTop; 26 var pt = par.offsetTop; 27 fix.style.position = st>pt ? "fixed" : "absolute"; 28 } 29 </script> 30 </body> 31 </html>
還有一種存在左側導航欄的情況
實現程式碼為
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <title> 頁面名稱 </title> 7 <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script> 8 <style type="text/css"> 9 html, body { 10 margin: 0; 11 padding: 0; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <div style="width:100%;height: 100px; background-color: #ccc;"> 18 </div> 19 <div> 20 <div style="width:20%;height:100%;background-color: #bbb;float: left">333333333333</div> 21 <div id="par" style=' float: left; width:80%;background-color:blue; position: relative;height: 1500px'> 22 <div id="fix" style="position: absolute;top:0px;left:0px;width:100%;background-color:red;height:100px"> 23 這個是固定的DIV 24 </div> 25 26 <div id='ct' style="margin-top: 120px"> 27 </div> 28 29 </div> 30 31 </div> 32 33 34 </div> 35 36 <script type="text/javascript"> 37 window.onscroll = function () { 38 var fix = document.getElementById("fix"); 39 var par = document.getElementById("par"); 40 //var sp = document.getElementById("sp"); 41 var ct = document.getElementById("ct"); 42 var st = document.documentElement.scrollTop || document.body.scrollTop; 43 var pt = par.offsetTop; 44 if (st>pt) { 45 fix.style.left = par.offsetLeft + "px"; 46 fix.style.width = par.offsetWidth + "px"; 47 fix.style.position = "fixed"; 48 var top = (document.documentElement.scrollTop - 200 + 120) + 'px'; 49 console.log(top); 50 $(ct).css('margin-top','120px'); 51 } else { 52 fix.style.left = "0px"; 53 fix.style.width = "100%"; 54 fix.style.position = "absolute"; 55 } 56 } 57 </script> 58 </body> 59 </html>
相關推薦
position:fix相對父元素定位
大家都知道，當position的值為fix時，生成絕對定位的元素，相對於瀏覽器視窗進行定位。 它常常應用的場合是，當下拉滾動條時固定導航欄到頂部，將廣告固定在頁面兩側或瀏覽器中間。 如果需要將導航欄div固定到瀏覽器頂部，只需要將top設定為0即可。 如果要將廣告div固定在特定位置，只需要用js計算出div
position屬性之相對父元素定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
position：fixed 相對父元素定位
position：fixed預設相對於瀏覽器進行定位，但是某些時候需要相對於父元素進行定位，例如在不同寬度下相對於某一位置固定定位。<div class="content"> <div class="parent"> <b
css中子元素相對於父元素定位
1、參照定位的元素必須是相對定位元素的前輩元素： <div id="box1"><!--參照定位的元素--> <div id="box2">相對參照元素進行定位</div><!--相對定位元素--> &l
position:absolute相對於誰定位以及當溢出時怎麽隱藏
沒有 mage pan inf 定位 聽說 上一個 註意 png 1、絕對定位元素溢出父元素，怎麽隱藏問題？ 通常，為了讓DIV子元素超出部分隱藏，都是在父元素設置overflow:hidden，這樣即可防止子元素撐開父元素，使子元素能夠溢出隱藏！ 但是，對於pos
讓一個元素相對於父元素固定定位
但是 ren -c 所有 展示 子元素 需要 不能滑動 play 之前在項目中，遇到了一個場景，需要實現相對於父元素的fixed定位：在父元素內拖動滾動條時，"fixed"定位的元素不能滑動，在外層拖動滾動條時，父元素及父元素內的所有元素跟著一起滑動。但是position:
38.相對於父元素的fixed定位的實現
attribute sele form 所有 分享 AI lac 希望 固定 之前在項目中，遇到了一個場景，需要實現相對於父元素的fixed定位：在父元素內拖動滾動條時，"fixed"定位的元素不能滑動，在外層拖動滾動條時，父元素及父元素內的所有元素跟著一起滑動。但是pos
子類absolute相對父類不同position的定位
在學習前端的時候遇到過一個問題: 當子類position為absolute時,父類的position 不同時子類會怎麼定位. 直接上圖好理解~ 灰色框框為祖父元素 position:relative 紅色框框為父元素 position: absolute/relative/inh
讓元素相對於父元素垂直水平居中的CSS
sla str gray posit osi 理解 idt div AD 垂直居中 position: relative; top: 50%; transform: translateY(-50%); 1、position: relative; 理解：
position 屬性指定了元素的定位型別
position 屬性指定了元素的定位型別。 position 屬性的五個值： static （靜態定位） HTML元素的預設值，即沒有定位，元素出現在正常的流中。 靜態定位的元素不會受到 top,
設定絕對定位對於子元素繼承父元素的高度的影響
筆者在寫網頁時，發現一個問題，當一個父元素沒有設定高度，而全靠子元素1撐起高度時，此時子元素2就無法繼承父元素的100%高度，程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset
nth-of-type等相對於父元素的結構偽類
相對於父元素的偽類 E:first-child：查詢相對於E的父元素的第一個指定型別的子元素 E:last-child：查詢相對於E的父元素的最後一個指定型別的子元素 E:first-of-
input元素相對父級元素錯位了？IE7
先看程式碼： <div id="div1" style="margin-left:100px"> <div id="div2" style="border:1px solid #000;width:100px">
IE6相對父容器絕對定位的bug及其解決辦法
一般相對父容器絕對定位是這樣的,子容器絕對定位,父容器設定成相對定位,就可以實現 <div style=”position:relative;border:1px solid orange;text-align:right;”> <a href=
父容器div內的子元素div為float時，父元素無法撐開（或高度自適應）的解決方式以及css中position和float的介紹
先簡單給出父元素無法高度自適應時的解決方案： 第一種：在父容器上設定 overflow:auto或者hidden可以讓它自動包含子元素，從而具有了實際的height值。 第二種：在子元素的最下面加上一個 空元素，並且設定clear:both，但
獲取元素相對於文件的偏移量以及元素相對於父元素的偏移量
問題1：如果獲取元素距離文件頂部的距離? var rect=$('#elem')[0].getBoundingClientRect(); //獲取元素距離文件頂部的距離 var top=rect.top+(window.pageYOffset||docum
div相對於父元素垂直居中
相對父元素永遠垂直居中，水平居中也可以採用此方法。 parent{ position: absolute; top: 0; left: 0; //不會有滑動條出現，跟視窗一樣大 height:
wpf 查找父元素、子元素方法
for parent end blog getchild ret static else () 1 /// <summary> 2 /// 根據類型查找子元素 3 /// </summary>
js在父元素上添加點擊事件，怎麽阻止子元素繼承父元素的點擊事件？
!= fun 元素 spa clas urn else target click div.onclick = function(ev){ if(ev.target!=this) return; else { ... } }js在父元素
HTML中Float和元素定位
分層 tom 依據 none 單位 正常 對象 ott 目前 浮動 1、float屬性——浮動 float：left；float：right；float：none； 2、清除浮動——clear Clear：left\right\both\none 3、溢出處