您现在的位置是：网站首页> 编程资料编程资料

深入理解CSS定位与层叠CSS属性之定位属性（图文详解）css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)CSS position属性和实例应用演示css position定位属性_动力节点Java学院整理 css中的三种基本定位机制CSS的position定位和float浮动详解CSS 定位之position全面了解CSS3定位和浮动详解CSS定位的教程

2023-10-22 231人已围观

简介 下面小编就为大家带来一篇深入理解CSS定位与层叠。小编觉得挺不错的，现在分享给大家，也给大家做个参考

position：static(静态定位)

当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置

podisition定位问题。所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认显示为静态位置，在静态定位状态下无法通过坐标值（top,left,right,bottom）来改变它的位置。

position：absolute(绝对定位)

当position属性定义为absolute时，元素会脱离文档流，完全不受文档流的影响，根据某个参照物坐标来定位它的位置.当绝对定位元素没有显示的指明top,right,bottom,left定位属性时，它还是暂时未脱离文档流，并受文档流的影响，具有相对定位的特性，但是它在文档流中的位置已经不存在了。如果绝对定位只显示的定位x轴或者Y轴，那它只具备这个方向上的定位能力，另一个方向仍然显示为相对定位的特性。

坐标值：
top:表示定位元素顶边外壁到参照物元素顶部内壁的距离
right:表示定位元素右边外壁到参照物元素右侧内壁的距离
left:表示定位元素左边外壁到参照物元素左侧内壁的距离
bottom:表示定位元素底边外壁到参照物元素底部内壁的距离

XML/HTML Code复制内容到剪贴板
  1. <div id="box">box                                                             
  2.   <div id="boxA">boxAdiv>     
  3.   <div id="boxB">boxB   
  4.    <div id="boxC">boxCdiv>  
  5.    <div id="boxD">boxDdiv>  
  6.   div>  
  7.  div>  
CSS Code复制内容到剪贴板
  1. #box{   
  2.  margin:40px auto;   
  3.  width:400px;   
  4.  height:400px;   
  5.  border:2px red solid;   
  6. }   
  7. #boxA{   
  8.  position:absolute;   
  9.  top:100px;   
  10.  left:100px;   
  11.  width:50px;   
  12.  height:50px;   
  13.  background: #3E7DB0;   
  14. }  

大盒子box在整个网页中距顶部40px居中显示，但是boxA由于position定位为绝对定位，它脱离了大盒子，距整个网页左边100px顶部100px，当元素定义为绝对定位，可以根据结合它的坐标属性（top,left,bottom,right）来精确定位它的位置

position:relative(相对定位)

相对定位好似一种折中的方法，是在静态定位和绝对定位中去一个平衡点，所谓相对定位就是使被应用的元素不脱离文档流，却能够通过坐标值以原始位置为参照物进行偏移。

坐标值：
top:表示定位元素顶边外壁到原始位置顶部外壁的距离
right:表示定位元素右边外壁到原始位置元素右侧外壁的距离
left:表示定位元素左边外壁到原始位置元素左侧外壁的距离
bottom:表示定位元素底边外壁到原始位置元素底部外壁的距离

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.      <div id="boxA">boxAdiv>  
  3.      <div id="boxB">boxB   
  4.       <div id="boxC">boxCdiv>  
  5.       <div id="boxD">boxDdiv>  
  6.         div>  
  7.     div>  
CSS Code复制内容到剪贴板
  1. #box{   
  2.  margin:40px auto;   
  3.  width:400px;   
  4.  height:400px;   
  5.  border:2px red solid;   
  6. }   
  7. #boxA{   
  8.  position:relative;   
  9.  top:100px;   
  10.  left:100px;   
  11.  width:50px;   
  12.  height:50px;   
  13.  background: #3E7DB

    上一篇：三个CSS技巧你应该知道深入理解CSS定位与层叠纯css3绘制可爱的小猪猪样式效果源码GitHub倡导的CSS编写风格及文件目录部署指南CSS实现6种鼠标滑过按钮背景动画特效源码CSS自适应布局思路css三种方法实现div在浏览器水平居中使用CSS实现小三角形效果【附实例】CSS控制文本的长度 超过一行显示省略号的实现方法

    下一篇：CSS控制文本的长度 超过一行显示省略号的实现方法CSS实现标题文字过长部分显示省略号的方法CSS文本超出指定宽度后隐藏并显示为省略号的实现方法表格单元格内容超出时显示省略号效果(实现代码)CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现CSS超出文本指定宽度用省略号代替和文本不换行CSS自动换行、强制不换行、强制断行、超出显示省略号强制文本在一行内显示,并且后面有省略号效果的实现方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网