CSS 如何进行绝对定位详解 | 基于实例代码分步讲解一站式学习Java

优先级

相对定位

工具版本兼容问题

绝对定位
属性：position
值： absolute

通过指定left,top绝对定位一个元素

示例 1 : 绝对定位
示例 2 : 绝对定位是基于最近的一个定位了的父容器
示例 3 : 如果没有定位了的父容器
示例 4 : z-index

示例 1 :

绝对定位

顶折

属性：position
值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了
所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档

"); window.frames["iframe_show484"].document.write(decodeHtml($("textarea#stepcodeTextarea484").val())); window.frames["iframe_show484"].document.close(); $(window.frames["iframe_show484"]).load(function(){ $("#iframe_show484").height($("#iframe_show484").contents().find("body").height()+showittryitheight); }); $("#iframe_show484").height($("#iframe_show484").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

<style>
p.abs{
  position: absolute;
  left: 150px;
  top: 50px;
}

</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

"); window.frames["iframe484"].document.write(decodeHtml(code484)); window.frames["iframe484"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe484"]).load(function(){ $("#iframe484").height($("#iframe484").contents().find("body").height()+showittryitheight); }); $("#iframe484").height($("#iframe484").contents().find("body").height()+showittryitheight); alreadyWriteCode484 = code484; $("#rendering484").hide(); $("#rendered484").show(); } var tRereshRetry2DemoPanel484 = setInterval(rereshRetry2DemoPanel484,1000); var binded484 = false; $("textarea#stepcodeTextarea484").keyup(function(){ if(!binded484){ $(window).bind('beforeunload',function(){ binded484 = true; return "xxxx"; }); } var newCode = $(this).val() code484 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code484!=newCode){ // window.frames["iframe484"].document.write("

"); // window.frames["iframe484"].document.write(decodeHtml($("textarea#stepcodeTextarea484").val())); // window.frames["iframe484"].document.close(); // $(window.frames["iframe484"]).load(function(){ // $("#iframe484").height($("#iframe484").contents().find("body").height()+showittryitheight); // }); // code484 = newCode; // } }); $(".tryButton484").click(function(){ $("#tryDiv484").show(); $("#stepcodeTextarea484").focus(); $("#stepcodeTextarea484").height(200); $("#iframe484").height(0); window.frames["iframe484"].document.write("

"); window.frames["iframe484"].document.write(decodeHtml($("textarea#stepcodeTextarea484").val())); window.frames["iframe484"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe484"]).load(function(){ $("#iframe484").height($("#iframe484").contents().find("body").height()+showittryitheight); }); $("#iframe484").height($("#iframe484").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor484.focus(); editor484.setSize(null, "250"); $("#rendering484").hide(); $("#rendered484").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor484 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea484"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor484.on("change",function(doc){ if(!binded484){ $(window).bind('beforeunload',function(){ binded484 = true; return "xxxx"; }); } var newCode = doc.getValue(); code484 = newCode; $("textarea#stepcodeTextarea484").val(newCode); if(alreadyWriteCode484!=code484){ lastModifedTime484 = new Date().getTime(); $("#rendering484").show(); $("#rendered484").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor484 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor484.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv484").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

绝对定位是基于最近的一个定位了的父容器

顶折

对于 "绝对定位的文字" 这个p，其定位了的父容器即 class="absdiv" 的div
所以 "绝对定位的文字" 这个p 出现的位置是以这个div 为基础的

"); window.frames["iframe_show485"].document.write(decodeHtml($("textarea#stepcodeTextarea485").val())); window.frames["iframe_show485"].document.close(); $(window.frames["iframe_show485"]).load(function(){ $("#iframe_show485").height($("#iframe_show485").contents().find("body").height()+showittryitheight); }); $("#iframe_show485").height($("#iframe_show485").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}
.absdiv{
  position: absolute;
  left: 150px;
  top: 50px; 
  width:215px;
  border: 1px solid blue;
}
</style>

<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>

<div class="absdiv">
这是一个定位了的div
<p class="abs" >绝对定位的文字</p>
</div>

"); window.frames["iframe485"].document.write(decodeHtml(code485)); window.frames["iframe485"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe485"]).load(function(){ $("#iframe485").height($("#iframe485").contents().find("body").height()+showittryitheight); }); $("#iframe485").height($("#iframe485").contents().find("body").height()+showittryitheight); alreadyWriteCode485 = code485; $("#rendering485").hide(); $("#rendered485").show(); } var tRereshRetry2DemoPanel485 = setInterval(rereshRetry2DemoPanel485,1000); var binded485 = false; $("textarea#stepcodeTextarea485").keyup(function(){ if(!binded485){ $(window).bind('beforeunload',function(){ binded485 = true; return "xxxx"; }); } var newCode = $(this).val() code485 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code485!=newCode){ // window.frames["iframe485"].document.write("

"); // window.frames["iframe485"].document.write(decodeHtml($("textarea#stepcodeTextarea485").val())); // window.frames["iframe485"].document.close(); // $(window.frames["iframe485"]).load(function(){ // $("#iframe485").height($("#iframe485").contents().find("body").height()+showittryitheight); // }); // code485 = newCode; // } }); $(".tryButton485").click(function(){ $("#tryDiv485").show(); $("#stepcodeTextarea485").focus(); $("#stepcodeTextarea485").height(200); $("#iframe485").height(0); window.frames["iframe485"].document.write("

"); window.frames["iframe485"].document.write(decodeHtml($("textarea#stepcodeTextarea485").val())); window.frames["iframe485"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe485"]).load(function(){ $("#iframe485").height($("#iframe485").contents().find("body").height()+showittryitheight); }); $("#iframe485").height($("#iframe485").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor485.focus(); editor485.setSize(null, "250"); $("#rendering485").hide(); $("#rendered485").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor485 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea485"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor485.on("change",function(doc){ if(!binded485){ $(window).bind('beforeunload',function(){ binded485 = true; return "xxxx"; }); } var newCode = doc.getValue(); code485 = newCode; $("textarea#stepcodeTextarea485").val(newCode); if(alreadyWriteCode485!=code485){ lastModifedTime485 = new Date().getTime(); $("#rendering485").show(); $("#rendered485").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor485 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor485.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv485").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

如果没有定位了的父容器

顶折

"绝对定位的文字" 这个p 的父容器div，并没有定位。所以它的”最近的一个定位了的父容器” 即body

"); window.frames["iframe_show486"].document.write(decodeHtml($("textarea#stepcodeTextarea486").val())); window.frames["iframe_show486"].document.close(); $(window.frames["iframe_show486"]).load(function(){ $("#iframe_show486").height($("#iframe_show486").contents().find("body").height()+showittryitheight); }); $("#iframe_show486").height($("#iframe_show486").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}

</style>

<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>

<div>
这个div没有定位
<p class="abs" >绝对定位的文字</p>
</div>

"); window.frames["iframe486"].document.write(decodeHtml(code486)); window.frames["iframe486"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe486"]).load(function(){ $("#iframe486").height($("#iframe486").contents().find("body").height()+showittryitheight); }); $("#iframe486").height($("#iframe486").contents().find("body").height()+showittryitheight); alreadyWriteCode486 = code486; $("#rendering486").hide(); $("#rendered486").show(); } var tRereshRetry2DemoPanel486 = setInterval(rereshRetry2DemoPanel486,1000); var binded486 = false; $("textarea#stepcodeTextarea486").keyup(function(){ if(!binded486){ $(window).bind('beforeunload',function(){ binded486 = true; return "xxxx"; }); } var newCode = $(this).val() code486 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code486!=newCode){ // window.frames["iframe486"].document.write("

"); // window.frames["iframe486"].document.write(decodeHtml($("textarea#stepcodeTextarea486").val())); // window.frames["iframe486"].document.close(); // $(window.frames["iframe486"]).load(function(){ // $("#iframe486").height($("#iframe486").contents().find("body").height()+showittryitheight); // }); // code486 = newCode; // } }); $(".tryButton486").click(function(){ $("#tryDiv486").show(); $("#stepcodeTextarea486").focus(); $("#stepcodeTextarea486").height(200); $("#iframe486").height(0); window.frames["iframe486"].document.write("

"); window.frames["iframe486"].document.write(decodeHtml($("textarea#stepcodeTextarea486").val())); window.frames["iframe486"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe486"]).load(function(){ $("#iframe486").height($("#iframe486").contents().find("body").height()+showittryitheight); }); $("#iframe486").height($("#iframe486").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor486.focus(); editor486.setSize(null, "250"); $("#rendering486").hide(); $("#rendered486").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor486 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea486"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor486.on("change",function(doc){ if(!binded486){ $(window).bind('beforeunload',function(){ binded486 = true; return "xxxx"; }); } var newCode = doc.getValue(); code486 = newCode; $("textarea#stepcodeTextarea486").val(newCode); if(alreadyWriteCode486!=code486){ lastModifedTime486 = new Date().getTime(); $("#rendering486").show(); $("#rendered486").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor486 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor486.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv486").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

z-index

顶折

通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。

重复了，就存在一个谁掩盖谁的问题。这个时候就可以使用

z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

"); window.frames["iframe_show3081"].document.write(decodeHtml($("textarea#stepcodeTextarea3081").val())); window.frames["iframe_show3081"].document.close(); $(window.frames["iframe_show3081"]).load(function(){ $("#iframe_show3081").height($("#iframe_show3081").contents().find("body").height()+showittryitheight); }); $("#iframe_show3081").height($("#iframe_show3081").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<style>
img#i1{
  position: absolute;
  left: 60px;
  top: 20px;
  z-index:1;
}
  
  img#i2{
  position: absolute;
  left: 60px;
  top: 120px;
  z-index:-1;
}
 
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>

<img id="i1" src="http://127.0.0.1/example.gif" />
<img id="i2" src="http://127.0.0.1/example.gif" />

"); window.frames["iframe3081"].document.write(decodeHtml(code3081)); window.frames["iframe3081"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3081"]).load(function(){ $("#iframe3081").height($("#iframe3081").contents().find("body").height()+showittryitheight); }); $("#iframe3081").height($("#iframe3081").contents().find("body").height()+showittryitheight); alreadyWriteCode3081 = code3081; $("#rendering3081").hide(); $("#rendered3081").show(); } var tRereshRetry2DemoPanel3081 = setInterval(rereshRetry2DemoPanel3081,1000); var binded3081 = false; $("textarea#stepcodeTextarea3081").keyup(function(){ if(!binded3081){ $(window).bind('beforeunload',function(){ binded3081 = true; return "xxxx"; }); } var newCode = $(this).val() code3081 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code3081!=newCode){ // window.frames["iframe3081"].document.write("

"); // window.frames["iframe3081"].document.write(decodeHtml($("textarea#stepcodeTextarea3081").val())); // window.frames["iframe3081"].document.close(); // $(window.frames["iframe3081"]).load(function(){ // $("#iframe3081").height($("#iframe3081").contents().find("body").height()+showittryitheight); // }); // code3081 = newCode; // } }); $(".tryButton3081").click(function(){ $("#tryDiv3081").show(); $("#stepcodeTextarea3081").focus(); $("#stepcodeTextarea3081").height(200); $("#iframe3081").height(0); window.frames["iframe3081"].document.write("

"); window.frames["iframe3081"].document.write(decodeHtml($("textarea#stepcodeTextarea3081").val())); window.frames["iframe3081"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3081"]).load(function(){ $("#iframe3081").height($("#iframe3081").contents().find("body").height()+showittryitheight); }); $("#iframe3081").height($("#iframe3081").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor3081.focus(); editor3081.setSize(null, "250"); $("#rendering3081").hide(); $("#rendered3081").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor3081 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3081"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor3081.on("change",function(doc){ if(!binded3081){ $(window).bind('beforeunload',function(){ binded3081 = true; return "xxxx"; }); } var newCode = doc.getValue(); code3081 = newCode; $("textarea#stepcodeTextarea3081").val(newCode); if(alreadyWriteCode3081!=code3081){ lastModifedTime3081 = new Date().getTime(); $("#rendering3081").show(); $("#rendered3081").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor3081 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor3081.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv3081").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

优先级

相对定位

HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。

关于前端部分-CSS-绝对定位的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 620943819

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图