精华内容
下载资源
问答
  • 在学习CSS,学到了了定位,在写代码的时候发现了一个小问题关于固定定位的。 首先我阐述一下什么是定位,定位就是将盒子定在某一位置,自由的漂浮在其他盒子的上面(这些盒子包括标准流和浮动),定位的语法为:定位...
  • 移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
  • 基本概念
  • 不管是相对路径、绝对路径,还是相对定位、绝对定位,刚接触的同学可能被这两个词弄的都很混乱。下面简单说一下DIV+CSS里面的相对、绝对以及固定定位。以下语言通俗易懂,个人见解
  • CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
  • 固定定位布局

    2017-09-07 15:54:08
    固定定位布局,顾名思义,其大小固定不变,不随浏览器大小变化而变化。(适用于初学者学习)把宽和高赋予特定的值。
  • 本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法,分享给大家,也给我自己留个笔记,方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 ...
  • css定位中的固定定位

    千次阅读 2019-11-06 23:52:14
    固定定位是比较重要的一个所以单独来讲。 固定定位(fixed)-重要 固定定位是绝对定位的一种特殊形式:(认死理型)如果说绝对定位是一个矩形那么 固定定位就类似于正方形。 完全脱标–完全不占位置; 只认浏览器...

    固定定位是比较重要的一个所以单独来讲。

    固定定位(fixed)-重要

    固定定位是绝对定位的一种特殊形式:(认死理型)如果说绝对定位是一个矩形那么
    固定定位就类似于正方形。
    
    1. 完全脱标–完全不占位置;
    2. 只认浏览器的可是窗口 — 浏览器可视窗口 + 边偏移属性 来设置位置;
      1. 根腐元素没有任何关系;
      2. 不随滚动条滚动

    命令显示图:

    在这里插入图片描述

    网页示例图:

    在这里插入图片描述

    注意:

    1. 绝对定位/固定定位的盒子 不能通过设置 margin:auto 设置水平居中。
    2. 堆叠顺序 (z-index)

        堆叠顺序  (z-index)
             在使用定位布局时,可能会出现盒子重叠的情况。
             加了点位的盒子,默认后来居上,后面的盒子会压住前面的盒子。
             应用z-index层叠等级属性可以调整盒子的堆叠顺序。
          z-index 的特性如下:
              1. 属性值:正整数、负整数或0、默认值是0、数值越大,盒子越靠上;
              2. 如果属性值相同,则按照书写顺序,后来居上;
              3. 数字后面不能加单位
         注意: 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、
             浮动和静态定位无效。
    

    命令显示图:

    在这里插入图片描述

    网页示例图:

    在这里插入图片描述

    3. 定位改变display属性

    display是显示模式,可以改变显示模式有以下方式;

    1. 可以用inline-block转换为行内块。
    2. 可以用浮动float默认转换为行内块(类似,并不完全一样,因为浮动是
      脱标的)。
    3. 绝对定位和固定定位也和浮动类似,默认转换的特性转换为行内块。
    

    所以说,一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子
    直接设置宽度高度等。

    同时注意:

    浮动元素、绝对定位元素的都不会触发外边距合并的问题。也就是说,
    我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。
    

    命令显示图:

    在这里插入图片描述

    网页示例图:

    在这里插入图片描述

    圆角矩形设置4个角:

    圆角矩形可以为4个角设置圆度,但是是有顺序的

     border-top-left-radius:20px;
     border-top-tight-radius:20px;
     border-bottom-right-radius:20px;
     border-bottom-left-radius:20px;
    

    如果4个角,数量相同:

    border-redius:15px;

    里面数值不同,我们也可以按照简写的形式,具体格式如下:

    border-radius: 左上角,右上角,右下角,左下角;
    还是遵循的顺时针。
    
    注意:
    1. 变偏移需要和定位模式联合使用,单独使用无效;
    2. top和bottom不要同时使用;
    3. left和right不要同时使用。
    
    网页布局总结

    一个完整的网页,有标准流、浮动、定位一起完成布局的。每个都有自己的专门用法。
    1. 标准流

    可以让合资上下排列或者左右排列的。
    

    2. 浮动

    可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列。
    

    3. 定位

    定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,但是每个盒子需要测量数值。
    

    好了今天更新完了。。。

    展开全文
  • 前端——css相对定位,绝对定位,固定定位

    千次阅读 多人点赞 2019-02-03 21:23:41
    文章目录相对定位 position: relative;特性用途绝对定位 position: ...绝对定位水平居中固定定位参考点 相对定位 position: relative; &lt;style type="text/css"&gt; .box1{ width: 200p...

    相对定位 position: relative;

    	<style type="text/css">
    		.box1{
    			width: 200px;
    			height: 200px;
    			background-color: red;
    			/*如果对当前元素仅仅设置相对定位,那么与标准流下的盒子没有什么区别*/
    			position: relative;
    			/*设置相对定位 我们就可以使用四个方向的属性  top left right bottom
    
    			相对定位:相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置
    			*/
    			top: 20px;
    			left: 30px;
    		}
    	</style>
    </head>
    <body>
    	 <div class="box1"></div>
    </body>
    

    特性

    		div{
    			width:200px;
    			height: 200px;
    		}
    		
    		.box1{
    			background-color: red;
    		}
    		.box2{
    			background-color: green;
    			position: relative;
    			top: 50px;
    			left: 100px;
    		}
    		.box3{
    			background-color: blue;
    		}
    
    

    在这里插入图片描述

    蓝色盒子并没有挤上去,绿色盒子移动之后没有脱离标准流,留下了空白,还有原位置的空白,产生了压盖效果,但是不要这么用。
    

    用途

    • 1.微调元素位置
    • 2.做绝对定位的参考(父相子绝)
    <style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		div{
    			margin: 100px;
    		}
    		.user{
    			font-size: 25px;
    		}
    		.btn{
    			position: relative;
    			top: 3px;
    			left: 5px;
    		}
    
    	</style>
    </head>
    <body>
    	<!-- 微调我们元素位置-->
    
    	<div>
    
    		<input type="text" name="username" class="user">
    		<input type="button" name="" value="点我" class="btn">
    	</div>
    

    在这里插入图片描述

    绝对定位 position: absolute;

    • 1.脱标,做遮盖效果,提升层级
    • 2.设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。
    *{
    			padding: 0;
    			margin: 0;
    		}
    		div{
    			width: 200px;
    			height: 200px;
    
    		}
    		.box1{
    			background-color: red;
    
    			position: absolute;
    		}
    		.box2{
    			width: 250px ;
    			background-color: green;
    
    		}
    		.box3{
    			background-color: blue;
    		}
    

    在这里插入图片描述

    span{
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    			
    			position: absolute;
    		}
    

    在这里插入图片描述
    在这里插入图片描述
    效果与diapaly,浮动比较:

    span{
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    			
    		}
    

    在这里插入图片描述

    span{
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    			display: block;
    		}
    
    span{
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    			float: left;
    		}
    

    在这里插入图片描述

    绝对定位参考点

    单独盒子绝对定位参考点:

    • 1.top属性描述, 是以页面的左上角,并不是body,而是页面html左上角为参考点来调整位置。滚动条滚动时,距离页面左上角位置不变。
    • 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。
    <div class="box1"></div>
    	<div class="box2"></div>
    
    body{
    			width: 100%;
    			height: 2000px;
    			border: 10px solid green;
    		}
    
    		.box1{
    			width: 200px;
    			height: 200px;
    			background-color: red;
    			position: absolute;
    			top: 100px;
    		}
    		
    		以绿色盒子作为参考说明不是以body为参考点,而是页面
    		.box2{
    			width: 200px;
    			height: 200px;
    			background-color:green;
    			margin-left: 100px;
    			margin-top: 100px;
    		}
    

    在这里插入图片描述
    top属性描述,滚动条滚动,与页面位置不变,跟浏览器位置没关系:
    在这里插入图片描述
    bottom属性描述时,以首屏页面左下角为参考点
    如果浏览器不动,滚动条动的时候,红色盒子跟随页面动,红绿盒子间距不变。
    在这里插入图片描述
    页面顶端与浏览器顶端重合时,移动浏览器底部,红色盒子距离浏览器底部距离不变。
    在这里插入图片描述

    父辈元素设置了相对定位,则子元素绝对定位以父辈元素为参考点。

    • 父相子绝,父绝子绝,父固子绝,都是以父辈元素为参考点。父绝子绝,因为绝对定位脱离标准流,影响页面的布局。父相子绝是常用的布局方案。(如果父辈有边框,则以内沿边界为起点)
    • 绝对定位的盒子无视父辈的padding。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		.box{
    			width: 300px;
    			height: 300px;
    			border: 5px solid red;
    			margin: 100px;
    			/*父盒子设置相对定位*/
    			position: relative;
    			padding: 50px;
    		}
    		.box2{
    			width: 300px;
    			height: 300px;
    			background-color: green;
    			position: relative;
    			
    		}
    
    		.box p{
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    			/*子元素设置了绝对定位*/
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    
    		
    
    	</style>
    </head>
    <body>
    	<div class="box">
    
    		<div class="box2">
    			<p></p>
    		</div>
    	</div>
    	
    </body>
    </html>
    

    在这里插入图片描述
    上一层没有再往上找:
    在这里插入图片描述

    绝对定位水平居中

    • 设置绝对定位之后,margin:0 auto;不起任何作用
    • 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		.box{
    			width: 100%;
    			height: 69px;
    			background: #000;
    		}
    		.box .c{
    			width: 960px;
    			height: 69px;
    			background-color: pink;
    			/*margin: 0 auto;*/
    			position: absolute;
    		
    			left: 50%;
    			margin-left: -480px;
    
    			}
    
    
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="c"></div>
    	</div>
    
    </body>
    </html>
    

    固定定位

    • 1.脱标

    • 2.提升层级

    • 3.固定不变

    		*{
    			padding: 0;
    			margin: 0;
    		}
    		p{
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			/*固定定位:固定当前的元素不会随着页面滚动而滚动,
    			特性:1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动
    
    			参考点:设置固定定位,用top描述。那么是以浏览器的左上角为参考点
    			如果用bottom描述,那么是以浏览器的左下角为参考点
    
    			作用: 1.返回顶部栏 2.固定导航栏 3.小广告
    
    			*/
    			position: fixed;
    			top: 30px;
    			left: 40px;
    		}
    	</style>
    </head>
    <body>
    
    	<div>
    		<p></p>
    		<img src="1_light__1024.ico" alt="">
    		<img src="1_light__1024.ico" alt="">
    		<img src="1_light__1024.ico" alt="">
    		<img src="1_light__1024.ico" alt="">
    		<img src="1_light__1024.ico" alt="">
    		<img src="1_light__1024.ico" alt="">
    		<div></div>
    		<img src="1_light__1024.ico" alt="">
    		<div></div>
    		<img src="1_light__1024.ico" alt="">
    		<div></div>
    		<img src="1_light__1024.ico" alt="">
    		<img src="1_light__1024.ico" alt="">
    		<div></div>
    		<img src="1_light__1024.ico" alt="">
    		<div></div>
    		<img src="1_light__1024.ico" alt="">
    
    	</div>
    </body>
    </html>
    

    之前:
    在这里插入图片描述
    之后脱标:
    在这里插入图片描述
    定在屏幕上:
    在这里插入图片描述

    参考点

    用top描述,以浏览器的左上角为参考点
    用bottom描述,以浏览器的左下角为参考点,无论滚动条动还是浏览器底部上下移动,固定定位盒子与底部距离始终不变。

    	<title>固定导航栏</title>
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		ul{
    			list-style: none;
    		}
    		a{
    			text-decoration: none;
    		}
    		body{
    			/*给body设置导航栏的高度,来显示下方图片的整个内容*/
    			padding-top: 49px;
    		}
    		.wrap{
    			width: 100%;
    			height: 49px;
    			background-color: #000;
    			
    			/*设置固定定位之后,一定一定要加top属性和left属性,
    			固定定位脱标,填充图片会被遮挡,设置body的padding之后导航栏会随之下移
    			固定定位以浏览器为参考,设置top和left之后定在浏览器顶部
    			*/
    			position: fixed;
    			top: 0;
    			left: 0;
    
    			
    		}
    		.wrap .nav{
    			width: 960px;
    			height: 49px;
    			margin: 0 auto;
    
    		}
    		.wrap .nav ul li{
    			float: left;
    			width: 160px;
    			height: 49px;
    			
    			text-align: center;
    		}
    		.wrap .nav ul li a{
    			width: 160px;
    			height: 49px;	
    			display: block;
    			color: #fff;
    			/*大小行高一起写*/
    			font: 20px/49px "Hanzipen SC";
    			background-color: purple;
    		}
    		.wrap .nav ul li a:hover{
    			background-color: red;
    			font-size: 22px;
    		}
    
    		
    	</style>
    </head>
    <body>
    	<div class="wrap">
    		<div class="nav">
    			<ul>
    				<li>
    					<a href="#">网页开发</a>
    				</li>
    				<li>
    					<a href="#">网页开发</a>
    				</li>
    				<li>
    					<a href="#">网页开发</a>
    				</li>
    				<li>
    					<a href="#">网页开发</a>
    				</li>
    				<li>
    					<a href="#">网页开发</a>
    				</li>
    				<li>
    					<a href="#">网页开发</a>
    				</li>
    			</ul>
    		</div>
    	</div>
    
    展开全文
  • 一、定位定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素,通过position属性来设置元素的定位 可选值: static:默认值,元素没有开启定位 relative:开启元素的相对定位 ...

     一、定位:
       

     定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位
     可选值:
                             static:默认值,元素没有开启定位
                             relative:开启元素的相对定位
                             absolute:开启元素的绝对定位
                             fixed:开启元素的固定定位(也是绝对定位的一种)


    1. 当元素的position属性设置为relative时,则开启了元素的相对定位

                       1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
                       2.相对定位是相对于元素在文档流中原来的位置进行定位
                       3.相对定位的元素不会脱离文档流
                      4.相对定位会使元素提升一个层级
                      5.相对定位不会改变元素的性质,块还是块,内联还是内联
     当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量
                          left:元素相对于其定位位置的左侧偏移量
                          right:元素相对于其定位位置的右侧偏移量
                          top:元素相对于其定位位置的上边的偏移量
                          bottom:元素相对于其定位位置下边的偏移量
     通常偏移量只需要使用两个就可以对一个元素进行定位,  一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    2. 当position属性值设置为absolute时,则开启了元素的绝对定位
                    

       1.开启绝对定位,会使元素脱离文档流
       2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
       3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
      4.绝对定位会使元素提升一个层级
       5.绝对定位会改变元素的性质, 内联元素变成块元素,块元素的宽度和高度默认都被内容撑开
           

    3.当元素的position属性设置fixed时,则开启了元素的固定定位


           固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样 ,不同的是: 

    固定定位永远都会相对于浏览器窗口进行定位  ,固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动,IE6不支持固定定位 

    4.层级

    如果定位元素的层级是一样,则下边的元素会盖住上边的,通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示,对于没有开启定位的元素不能使用z-index

    展开全文
  • css-绝对定位、相对定位、固定定位

    千次阅读 2020-01-31 20:48:29
    css中为了实现目标元素的布局,设计了三种元素的定位模式:绝对定位(absolute)、相对定位(relative)、固定定位(fixed。 语法: css选择器{ /*position的取值有四种:1)absolute-绝对定位; 2)relative-...

    css中为了实现目标元素的布局,设计了三种元素的定位模式:绝对定位(absolute)相对定位(relative)固定定位(fixed

    • 语法:
    css选择器{
        /*position的取值有四种:1)absolute-绝对定位;
                              2)relative-相对定位阿;
                              3)fixed-固定定位;
                              4)inherent-继承父元素的position值*/
        position: absolute;
        /*left和top是对position的补充。表示浏览器左边和顶端的距离。*/
        left: 440px;
        top:0;
    }
    
    • 三种定位的比较:
    定位方式定位原理
    绝对定位脱离原始位置进行定位。相对于最近的有定位的父级进行定位,如果没有具有定位的父级或更早的祖先级定位元素,则相对于文档定位
    相对定位保留原来位置进行定位。相对于自己原来的位置进行定位。
    固定定位固定于屏幕的制定位置,无论页面怎么动,被定位的元素不会改变

    下面来讲解一下定位原理:
    1)脱离原始位置进行定位与保留原来位置进行定位的区别:
    我们构建两个div:

        <div id="box1"></div>
        <div id="box2"></div>
    

    使用css使得他们的长和宽分别为100px和200px,背景颜色分别为红和蓝:

    #box1{
        width: 100px;
        height:100px;
        background-color: red;
    }
    #box2{
        width: 200px;
        height:200px;
        background-color: blue;
    }
    

    下面是显示的效果:
    在这里插入图片描述
    为什么会分上下两个div展示出来而不是左右两个div展示呢?这是因为div是独占一行的。有了这个,我们来看一下,什么是绝对定位的脱离原始位置进行定位
    css改为:

    #box1{
        position: absolute;
        left: 100px;
        top:100px;
        opacity: 0.5;
        width: 100px;
        height:100px;
        background-color: red;
    }
    
    #box2{
        width: 200px;
        height:200px;
        background-color: blue;
    }
    
    

    我们使得box1为绝对定位,并设置了left与top=100px,透明度为0.5。我们来看一下效果:
    在这里插入图片描述
    可以看到蓝色的box2跑到了左上角。而红色的box则定位到了距离顶端和左端100px的地方。这反应了什么呢?我们仔细思考一下,为什么蓝色方框不是在红色方框的下面,而是直接来到了浏览器的左上角?这其实就是绝对定位的脱离原始位置进行定位的反映。也就是说其实 使用了绝对定位的元素其实已经不在它原来的那一层了。所以蓝色的方框这一层就只剩下了它自己。那么它自然就来到了左上角。 这个情况可以类比我们现实生活中的立交桥。我们把这两个盒子看作两辆车。正常情况下,当一辆车占据了一个位置后,另一辆车就只能在另一个不与这辆车重合的位置(不然岂不是就撞到了)。这种情况就和刚开始没有使用绝对定位的情况一致。蓝色方框被挤到了第二行。但是使用了绝对定位之后,就相当于在这个位置之上建了一个立交桥。红色方框脱离了它原来的位置来到了立交桥上。此时,蓝色方框与红色方框不在同一层上自然也就互不影响。所以蓝色方框也就可以来到左上角了而不是被挤到红色方框下面。
    那什么是相对定位的保留原来位置进行定位呢?
    我们把box1的css中position改为relative,也就是box1从绝对定位改为相对定位。它的效果如下:
    在这里插入图片描述
    我们看到蓝色方框的位置还是和最开始没有使用任何定位时一致,红色方框来到了它定位的位置。这就是相对定位的保留原来位置。也就是,虽然红色方框到了它定位的位置。但是它原来所占据的位置它还是要占着。这就像这个红色方框的身体已经被强制放到了建好的立交桥上的位置,但是它的灵魂还留在了原地。所以这个蓝色方框在它所在的那个层还是被挤到了第二行而不能去到左上角。
    2)绝对定位相对于最近的有定位的父级进行定位:
    建立三个div,层层包裹:

        <div class="wrapper">
            <div class="content">
                <div class="box"></div>
            </div>
        </div>
    

    使用css渲染他们:

    .wrapper{
        margin-left: 100px;
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .content{
        margin-left: 100px;
        width: 100px;
        height: 100px;
        background-color: black;
    }
    .box{
        width:50px;
        height: 50px;
        background-color: yellow;
    }
    

    效果(创建了橘黄色、黑色、金黄色三个box):
    在这里插入图片描述
    现在我们给金黄色的div设置绝对定位:

    .box{
        position: absolute;
        left:50px;
        top:50px;
        width:50px;
        height: 50px;
        background-color: yellow;
    }
    

    我们来看一下这下金黄色的div在哪里:
    在这里插入图片描述
    可以很清楚的看到看到金黄色的div应该是以浏览器的左上角做为参照进行了绝对定位。那么它为什么不是以橘黄色或者黑色的div的左上角顶点做为参照呢?这是因为进行绝对定位的时候,当前元素会逐级往回找他的祖先元素。当找到第一个设置了position属性的祖先元素之后,它就会以这个元素的左上角为参照进行定位。而这里它的两个祖先元素黑色、橘黄色div都没有设置position属性,所以金黄色div进行绝对定位的参照点就来到了浏览器左上角。现在我们将橘黄色的div中position设置为relative(或者是absolute、fixed都行),这时候金黄色div的参照点就是橘黄色div的左上角了。如下:

    .wrapper{
        position: relative;
        margin-left: 100px;
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    

    在这里插入图片描述
    3)相对定位相对于自己原来的位置进行定位:
    我们把最开始的金黄色div定位方式变为relative:

    .wrapper{
        margin-left: 100px;
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .content{
        margin-left: 100px;
        width: 100px;
        height: 100px;
        background-color: black;
    }
    .box{
        position: relative;
        left:50px;
        top:50px;
        width:50px;
        height: 50px;
        background-color: yellow;
    }
    

    在这里插入图片描述
    相对定位的方式就是相对于自身原来所在位置的左上角位置进行定位。

    • 如何使用他们:
      那么我们该如何使用这个三种定位方式呢:
      通常情况情况下,我们使用relative作为定位的基准点,然后使用absolute进行定位。
    展开全文
  • 一、固定定位 position:fixed; 【固定定位】 a: 参照物:浏览器窗口。 b: 不占据空间,脱离布局流。 (注:如果块状元素没有设置宽度的时候,添加position:absolute 或position:fixed会出现宽度被内容撑开) 让一个...
  • 后,子级的固定定位会失效:(解决办法,去除父级的transform: translate(0, 0); 即可) html: <div class="guding"> <div class="fixed-box"></div> </div> CSS代码...
  • 固定定位&元素的层级&opacity元素的透明背景 相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
  • 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。 使用relative,即相对定位...
  • 固定定位(fixed)

    千次阅读 2019-06-30 20:49:19
    -- 固定定位只认自己定位的位置,全局位置 --> ad 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 我是文字 ...
  • CSS中固定定位、相对定位、绝对定位以及flex布局高效定位 一、固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动。 <style> body { height: 3000px; background-color: lightskyblue; ...
  • 前端固定定位,相对定位和绝对定位之间的关系 固定定位固定定位的位置是 相对当前浏览器窗口 的 根据浏览器进行偏移,并不根据父容器是绝对定位还是相对定位。固定定位和相对定位很像,固定定位是依据浏览器进行...
  • CSS 固定定位:固定在版心右侧

    千次阅读 2020-07-10 11:43:47
    固定定位:固定在版心右侧 固定定位 定义:随用户滚动界面而一起移动的定位效果 CSS代码: position:fixed; 边距:left,right,top,bottom. 距离衡量:相对于浏览器可视区域的四个角,可视区域即用户打开浏览器...
  • 说到定位就要用到 position 属性我们有四种不同的属性值 1.static 静态定位:使用静态定位时,元素处于普通流中,和未添加的元素一样处在最底层。 2.relative 相对定位:是相对于该元素在普通流时的位置 元素仍保持其...
  • 如何使用固定定位

    千次阅读 2019-06-18 09:04:52
    创建div,给他类,包裹住图片(图片是要被固定定位使用的对象)。 类选择器,然后 把他的类名写上,给他写样式。也可以在源代码里写,不过要用style包裹住。样式是一个固定定位,然后向下百分之8,向右百分之8,...
  • HTML之固定定位

    千次阅读 2017-09-28 15:29:31
    /*固定定位*/ top: 0px; } #dh2{ border: 1px solid #000000; background-color: #FFFFFF; ...
  • 绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(html)。 绝对定位本身与文档流无关,因此不占...
  • CSS 提供了三种基本的定位机制:普通流、浮动和定位;通过这三种方式可实现页面的排版布局。 普通流 普通流中元素的位置由元素在 (X)HTML 中的位置决定: 块级元素独自占一行,在文本流中从上到下一个接一个地排列...
  • 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先...
  • 1、首先什么是定位,定位分几种,有什么作用  1、针对html定位,其实跟div...  2、定位分为相对定位,绝对定位,固定定位  3、定位相对于浮动更灵活,并且所有的元素都可以采用定位 2、相对定位  position:...
  • 布局排版是网页设计的基础,熟练使用各种定位写起网页来会更得心应手。 静态定位 当添加一个HTML元素,不设置定位方式默认为静态定位(position:static),静态定位属于文档流(排列方式就像文本,一行一行排列,...
  • 绝对定位: position: absolute; absolute(绝对定位) 脱离文档流,通过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标...
  • CSS中的静态定位 固定定位 绝对定位和相对定位
  • 最近有遇到,导航栏里3个div,需要居中,给父元素用弹性布局,然后需要给导航栏的3个div做固定定位,直接给父元素用 position: fixed;发现弹性布局的样式失效了,百度了好久,才发现问题!上代码 结构: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 282,888
精华内容 113,155
关键字:

固定定位