首页 > 其他分享 >CSS定位

CSS定位

时间:2023-01-17 05:33:05浏览次数:47  
标签:定位 height 1px background position border CSS

 

1. 相对定位

position:relative;

相对于原来的位置进行指定的偏移,相对定位,它仍然在标准文档流中!原来的位置会被保留

top: -20px;
left:20px;
bottom:-10px;
right:20px;

 

<!-- 相对定位
    相对于自己原来的位置进行偏移-->
<style>
   div{
     margin:10px;
     padding:15px;
     font-size: 12px;
     line-height: 25px;
  }
   #father{
     border: 1px solid #666;
     padding:0;
  }
   #first{
     background-image: linear-gradient(19deg, #21fdf6 0%, #67ff02 100%); /*渐变色背景*/
     border: 1px dashed #B27530;
     position:relative; /*相对定位:上下左右*/
     top: -20px;
     left:20px;
  }
   #second{
     background-image: linear-gradient(19deg, #67ff02 0%, #21fdf6 100%);
     border: 1px dashed #255066;
  }
   #third{
     background-image: linear-gradient(19deg, #21fda9 20%, #ffda21 100%);
     border: 1px dashed #1c6615;
     position:relative;
     bottom:-10px;
     right:20px;
  }
</style>


<body>

<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>

</body>

 

2. 绝对定位

定位:基于xxx定位,上下左右

1、没有父级元素定位的前提下,相对于浏览器定位

2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移


<style>
   div{
     margin:10px;
     padding:15px;
     font-size: 12px;
     line-height: 25px;
  }
   #father{
     border: 1px solid #666;
     padding:0;
     position: relative;
  }
   #first{
     background-image: linear-gradient(19deg, #21fdf6 0%, #67ff02 100%); /*渐变色背景*/
     border: 1px dashed #B27530;
  }
   #second{
     background-image: linear-gradient(19deg, #67ff02 0%, #21fdf6 100%);
     border: 1px dashed #255066;
     position: absolute;
     right: 30px; /*同时设定两个相对方向可实现拉伸*/
     left: -10px;
  }
   #third{
     background-image: linear-gradient(19deg, #21fda9 20%, #ffda21 100%);
     border: 1px dashed #1c6615;
  }
</style>

<body>

<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>

</body>

 

 

3. 固定定位

<style>
   body{
       height: 1000px;
  }
   div:nth-of-type(1){ /*绝对定位:相对于浏览器*/
       width: 100px;
       height: 100px;
       background: red;
       position: absolute;
       right: 0;
       bottom: 0;
       /*相对于浏览器打开时的位置固定,会随网页翻动而移动*/
  }
   div:nth-of-type(2){ /*fixed,固定定位*/
       width: 50px;
       height: 50px;
       background: yellow;
       position: fixed;
       right: 0;
       bottom: 0;
       /*定位后任何操作都不会移动*/
  }
</style>

<body>

<div>div1</div>
<div>div2</div>

</body>

 

4. z-index

图层

z-index:默认是0,最高无限

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="css/style.css">
</head>

<div id="content">
 <ul>
   <li><img src="images/a.jpg" /></li>
   <li class="tipText">好好学习,天天向上</li>
   <li class="tipBg"></li>
   <li>时间:2023-1-17</li>
   <li>地点:月球</li>
 </ul>
</div>

 

#content{
   width: 200px;
   padding: 0px;
   margin: 0px;
   overflow: hidden;
   font-size: 12px;
   line-height: 25px;
   border: 1px solid black;
}
ul,li{
   padding: 0;
   margin: 0;
   list-style: none;
}
/*父级元素相对定位*/
#content ul{
   position: relative;
}
.tipText,.tipBg{
   position: absolute;
   width: 200px;
   height: 25px;
   top: 125px;
}
.tipText{
   color: white;
   z-index: 0;
}
/*背景透明度*/
.tipBg{
   background: black;
   opacity: 0.5;
   filter: opacity(0.5);/*另一种写法*/
}
 

标签:定位,height,1px,background,position,border,CSS
From: https://www.cnblogs.com/jiaxing-java/p/17056849.html

相关文章

  • 轻松解决 CSS 代码都在一行的问题
    前言最近在做博客园的界面美化,用的是博客园[guangzan]的开源项目,配置超级简单,只需要复制粘贴代码就好啦。但在粘贴CSS代码时遇到一个问题,那就是所有代码都挤在了一行,没......
  • sass/scss和less对比
    一、less、sass/scss是什么less:是一种动态样式语言,对CSS赋予了动态语言的特性,如变量、继承、运算、函数。Less既可以在客户端上运行(支持IE6+,Webkit,Firefox),也可......
  • 元素定位之--frame嵌套页面元素定位
    案例:在Frame.html文件种定位搜狗搜索页面,进行搜索操作。fromseleniumimportwebdriverfromtimeimportsleepdriver=webdriver.Firefox()#设置网页文件路径,r代表路......
  • 元素定位之--下拉菜单元素定位
    案例:在51xxx网站登录页面选择指定的保留时间。1.根据选项元素标签定位fromseleniumimportwebdriverfromtimeimportsleepfromselenium.webdriver.support.uiim......
  • 元素定位之--Css定位
    Selenium极力推荐使用CSS定位而不是XPath来定位元素,原因是CSS定位比XPath定速度快,语法也更加简洁。CSS常用定位方法1.find_element_by_css_selector()2.#idid选择器......
  • 让定位的盒子居中对齐
    1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<style>7div{8width:20......
  • 元素定位之--XPath定位
    XPath即为XML路径语言,它是一种用来确定XML文档中某部分位置的语言。XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力。xpath绝对与相对定位fromseleniumimpor......
  • 元素定位--tag_name定位
    案例:打开百度页面,在用户名输入框输入用户名“selenium”fromseleniumimportwebdriverfromtimeimportsleepdriver=webdriver.Firefox()driver.get("http://www......
  • 元素定位之--class_name定位
    根据标签中属性class来进行定位的一种方法fromseleniumimportwebdriverfromtimeimportsleepdriver=webdriver.Firefox()driver.get("http://www.baidu.com")......
  • 元素定位--id与name 定位
    元素定位元素的定位应该是自动化测试的核心,要想操作一个元素,首先应该识别这个元素。webdriver提供了一系列的元素定位方法,常用的有以下几种idnameclassnamelinkte......