CSS(12)定位

编程之家收集整理的这篇文章主要介绍了CSS(12)定位编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

定位

相对定位

 相对定位 : position: relative;
 相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在文档流中
 top : 10px;     距离上方移动10px (向下)
 left
 bottom
 right :-20px;   距离右方移动-20px (向右)

html :

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <Meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../定位/style.css">
 ​
 </head>
 <body>
 ​
 <div class="@R_771_2419@">
 ​
   <div class="div1">第一个盒子</div>
   <div class="div2">第二个盒子</div>
   <div class="div3">第三个盒子</div>
 ​
 </div>
 ​
 </body>
 </html>

css :

 .@R_771_2419@{
   margin: 0;
   padding: 0;
   width: 200px;
   height: 70px;
   border: 1px solid #779dbd;
 }
 ​
 .div1{
   background: #779dbd;
   border: 1px solid #779dbd;
 ​
   /*
    相对定位 : position: relative;
    相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在文档流中
    top : 10px;     距离上方移动10px (向下)
    left
    bottom
    right :-20px;   距离右方移动-20px (向右)
  */
   position: relative;
   right: -20px;
 }
 ​
 .div2{
   background: #2f70ff;
   border: 1px solid #2f70ff;
   position: relative;
   top: 10px;
 }
 ​
 .div3{
   background: #80D0C7;
   border: 1px solid #80D0C7;
 }

绝对定位

 绝对定位 :   position: absolute;
 1.没有父级元素定位的前提下,相当于浏览器定位
 2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移
 3.在父级元素范围内移动
 相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不存在标准文档流中,原来的位置不会被保留

父级定位:

 .@R_771_2419@{
   margin: 0;
   padding: 0;
   width: 200px;
   height: 70px;
   border: 1px solid #779dbd;
   position: relative;
 }

绝对定位:

 .div3{
   background: #80D0C7;
   border: 1px solid #80D0C7;
   position: absolute;
   left: 300px;
 }

html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <Meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../定位/style.css">
 ​
 </head>
 <body>
 ​
 <div class="@R_771_2419@">
 ​
   <div class="div1">第一个盒子</div>
   <div class="div2">第二个盒子</div>
   <div class="div3">第三个盒子</div>
 ​
 </div>
 ​
 </body>
 </html>

css:

 .@R_771_2419@{
   margin: 0;
   padding: 0;
   width: 200px;
   height: 70px;
   border: 1px solid #779dbd;
   position: relative;
 }
 ​
 .div1{
   background: #779dbd;
   border: 1px solid #779dbd;
 ​
   /*
    相对定位 : position: relative;
    相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在文档流中
    top : 10px;     距离上方移动10px (向下)
    left
    bottom
    right :-20px;   距离右方移动-20px (向右)
  */
   /*position: relative;
  right: -20px;*/
 }
 ​
 .div2{
   background: #2f70ff;
   border: 1px solid #2f70ff;
   /*position: relative;
  top: 10px;*/
 }
 ​
 .div3{
   background: #80D0C7;
   border: 1px solid #80D0C7;
 ​
   /*
    绝对定位 :   position: absolute;
    1.没有父级元素定位的前提下,相当于浏览器定位
    2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移
    3.在父级元素范围内移动
    相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不存在标准文档流中,原来的位置不会被保留
  */
   position: absolute;
   left: 300px;
 }

固定定位

 固定定位 : position: fixed;

html :

 <div class="div4">div4</div>
 <div class="div5">div5</div>

css:

 .div4{
   width: 100px;
   height: 100px;
   background: #c3d23b;
   border: 2px solid #c3d23b;
   position: absolute;
   right: 0;
   bottom: 0;
 }
 ​
 .div5{
   width: 50px;
   height: 50px;
   background: #ce3939;
   border: 2px solid #ce3939;
 ​
   /*固定定位 : position: fixed;*/
   position: fixed;
   right: 0;
   bottom: 0;
 }

 

总结

以上是编程之家为你收集整理的CSS(12)定位全部内容,希望文章能够帮你解决CSS(12)定位所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的CSS相关文章

常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而
Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带空格
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
html代码是这样的 &lt;div class=&quot;arrow-up&quot;&gt; &lt;!--向上的三角--&gt; &lt;/div&gt; &lt;div class=&quo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注