zoukankan      html  css  js  c++  java
  • CSS定位

    1.相对定位
    元素以自己为参照物,进行移动
    position:relative
    top:
    left:
    元素原始位置(如下图)
    在这里插入图片描述
    以相对定位设定之后:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>相对定位</title>
    		<style type="text/css">
    			#id01{
    				 100px;
    				height: 100px;
    				background-color: gold;
    				position: relative;
    				top: 40px;
    				left: 40px;
    			}
    			#id02{
    				 200px;
    				height: 200px;
    				background-color: red;
    				position: relative;
    				top: 50px;
    				left: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="id01">
    			div1
    		</div>
    		<br />
    		<div id="id02">
    			div2
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    2.绝对定位
    元素以父元素为参照物进行移动(父元素必须设置定位)
    position:absolute
    top:
    left:
    原始位置:
    在这里插入图片描述
    绝对定位设定之后:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>绝对定位</title>
    		<style type="text/css">
    			#id01{
    				 300px;
    				height: 300px;
    				background-color: gold;
    				margin: auto;
    				/*设置父元素定位*/
    				position: relative;
    			}
    			#id02{
    				 200px;
    				height: 200px;
    				background-color: red;
    				/*设置子元素绝对定位*/
    				position: absolute;
    				top: 50px;
    				left: 50px;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div id="id01">
    			父
    			<div id="id02">子</div>			
    		</div>
    		
    	</body>
    </html>
    

    在这里插入图片描述

    3.固定定位:
    元素以浏览器为参照物
    position:fixed
    top:
    left:
    原始位置:
    在这里插入图片描述
    固定定位设置之后:(浏览器下拉不了,位置固定)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>绝对定位</title>
    		<style type="text/css">
    			#id01{
    				 300px;
    				height: 300px;
    				background-color: gold;
    				margin: auto;
    				position: fixed;
    				top: 100px;
    				left: 100px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="id01">
    			哈哈		
    		</div>
    		
    	</body>
    </html>
    

    在这里插入图片描述

  • 相关阅读:
    (转载)MySQL日期时间函数大全
    Tcl commands
    Toplevel
    tk 8.4 commands
    iwidgets
    Options for Buttontype widgets
    Text Widget Options
    tk options
    itk_option
    Widget Options
  • 原文地址:https://www.cnblogs.com/ilovepython/p/11068876.html
Copyright © 2011-2022 走看看