定位与布局（示例导航菜单）

定位与布局（示例导航菜单）

1.流体布局

• 行内元素仅仅占据其中内容需要的空间
• 块级元素则撑满整个父元素，除非指定宽度
  这就是当元素不指定position属性时，文档流对元素布局的默认规则

2.定位元素
在文档流中，元素的position是static多。
当position为relative、absolute、fixed，则表示元素脱离了文档流
当元素被定位脱离了文档流，那么该元素就可以看做一个容器元素

3.浏览器确定元素的offsetParent
一个元素的offsetParent值有3种情况

• null
  • 值为null的情况是，元素为body元素或者，该元素不具有布局（display:none）,或该元素尚未加到DOM。当然position：fixed，器offsetParent也是null，因为是相对视图定位。
• body元素
  • 如果元素不是任何一个定位元素的后代，也不满足任何返回null的条件那么其offsetParent是< body >
• 该元素的祖先定位元素
  • 如果元素是定位元素的后代，那离他最近多那个祖先定位元素就是他的offsetParent，值得注意的是，如果元素不是定位元素的后代，但是确实< td >、< th > 、< table >、元素，那么其offsetParent就是最近的上述元素

补充：祖先定位元素

.div1{position:relative}

< div class="div1" >
		< div class="div2 >< /div >
< /div >

上述代码：div1就是div的祖先定位元素

4.定位作用
相对定位：一般是让元素成为容器元素，或者为元素应用z-index
绝对地位：脱离标准文档流，文档流的位置就不存在了，一般用来创建工具栏，对话框等
固定定位：相对于视窗，比如创建固定在头部的导航条

5.计算元素位置

相对视窗定位（position：fixed）

element.getBoundingClientRect//返回元素的left、top、right、bottom

相对于文档定位（position：abusolue）

//思想就是找到元素的offsetParent，回溯到dom树直到body元素即可，把每一级的offsetLeft和offsetTop累加起来
let getEloffsets = (el)=>{
	let offsets = {
		left:el.offsetLeft||0,
		top:el.offsetTop||0
	}
	while(el = el.offsetParent){
		offsets.left += el.offsetLeft||0,
		offsets.top +=el.offsetTop||0
	}
	return offsets
}

6.用相对定位和绝对定位做的导航菜单，不涉及js
思路：
li当做祖先定位元素position:relative=>然后li的子div的display：none=>当鼠标放在li上其子的display:block同时进行绝对定位
代码如下
css代码

/*导航菜单样式*/
[role="tjnavmenu"]{
	background: rgb(84,92,100);height:60px;line-height: 60px;
}
[role="tjnavmenu"]:after{content:"";display: block;clear: both;}
[role="tjnavmenu"] a{text-decoration: none;}
.tjnavmenu_ul{background: rgb(84,92,100);}
.tjnavmenu_ul > li{
	float:left;
	height:60px;line-height: 60px;
	padding:0 15px;
	position: relative;
	background: rgb(84,92,100)
}
.tjnavmenu_ul > li:hover{background: rgb(67,74,80);cursor: pointer;}
.tjnavmenu_ul > li:hover>a{color:#aeeeee;}
.tjnavmenu_ul > li:hover .nav_childs_a{display:block;}
.tjnavmenu_ul > li .nav_childs_a{
	position: absolute;
	top:60px;
	left:0;display:none;
	width: 240%;
}
.tjnavmenu_ul > li .nav_childs_a>ul{
	margin:5px;
	border-radius:3px;
	padding:5px 0;
	background: rgb(84,92,100);
}
.tjnavmenu_ul > li .nav_childs_a > ul > li:hover{
	background: rgb(67,74,80);
}
.tjnavmenu_ul > li .nav_childs_a > ul > li:hover>a{color: #aeeeee}
.tjnavmenu_ul > li .nav_childs_a > ul > li{
	height:30px;line-height:30px;padding:0px 10px;
}
.tjnavmenu_ul > li a{
	/*color:#AEEEEE;*/
	color:#ffffff;
}
.tjnavmenu_ul .nav_childs_a > ul > li{position: relative;background: rgb(84,92,100)}
.tjnavmenu_ul .nav_childs_a > ul > li .nav_childs_b{
	position: absolute;
	left:100%;
	top: 0;
	width:100%;
	padding:0 5px;
	display:none;
}
.tjnavmenu_ul .nav_childs_a > ul > li:hover .nav_childs_b{display:block;}
.tjnavmenu_ul .nav_childs_a > ul > li .nav_childs_b ul{
	background: rgb(84,92,100);
	padding:5px 0;border-radius:3px;
}
.tjnavmenu_ul .nav_childs_a >ul > li .nav_childs_b ul > li{
	padding-left:10px;
	background: rgb(84,92,100)
}
.tjnavmenu_ul .nav_childs_a >ul > li .nav_childs_b ul > li:hover a{
	color: #aeeeee;
}
.tjnavmenu_ul .nav_childs_a >ul > li .nav_childs_b ul > li:hover{
	background:rgb(67,74,80);
}

html代码

<nav role="tjnavmenu">
    	<ul class = "tjnavmenu_ul">
    		<li>
    			<a href="">导航一</a>
    		</li>
    		<li>
    			<a href="">导航二</a>
    			<div  class="nav_childs_a">
	    			<ul>
	    				<li><a href="#">二-导航一</a></li>
	    				<li><a href="#">二-导航二</a></li>
	    				<li><a href="#">二-导航三</a></li>
	    			</ul>
	    		</div>
    		</li>
    		<li>
    			<a href="">导航三</a>
    			<div  class="nav_childs_a">
	    			<ul>
	    				<li>
	    					<a href="#">三-导航一</a>
	    					<div class="nav_childs_b">
		    					<ul>
		    						<li><a href="#">xx-导航一</a></li>
		    						<li><a href="#">xx-导航二</a></li>
		    						<li><a href="#">xx-导航三</a></li>
		    					</ul>
		    				</div>
	    				</li>
	    				<li>
	    					<a href="#">三-导航二</a>
	    					<div class="nav_childs_b">
		    					<ul>
		    						<li><a href="#">xx-导航一</a></li>
		    						<li><a href="#">xx-导航二</a></li>
		    						<li><a href="#">xx-导航三</a></li>
		    					</ul>
		    				</div>
	    				</li>
	    			</ul>
	    		</div>
    		</li>
    	</ul>
    </nav>