奇舞-定位和堆叠-笔记

最新推荐文章于 2024-07-14 20:07:21 发布

爱lv行

最新推荐文章于 2024-07-14 20:07:21 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/u013165804/article/details/79739702

版权

定位模式(Positioning schemes)

常规流(Normal Flow)
浮动(FLoat)
绝对定位(Absolute Positioning)

position

static 非定位默认值
relative 相对定位 (相对自己)
absolute(绝对定位，相对非static 祖元素定位)
fixed ，相对视口绝对定位
sticky 粘性文档流里离它最近的滚动元素，包含块

relative

在常规流里面布局
相对于自己本本应该的位置进行偏移
使用 top left bottom right 设置偏移长度
流内其它元素当他没有偏移一样布局

//html
	<figure>
		<img src="https://cdn.dribbble.com/users/2190949/screenshots/4404644/14giraffe02_1x.png">
		 <figcaption> 图片内容</figcaption>

	</figure>
	<p> 其它文本内容</p>
//css

	figure {
		width: 512px;
	}
	figure img {
		display: block;
	}
	figcaption {
		position: relative;
		top: -28px;
		background: rgba(0,0,0,.3);
		color: #fff;
		font-size: 14px;
		line-height: 2;
		padding: 0 1em;

	}

absolute

脱离文档流
相对于最近的非static祖先的padding box 定位
不会对流动元素布局造成影响
可以有margin，但不会折叠

//html
<figure>
		<img src="https://cdn.dribbble.com/users/2190949/screenshots/4404644/14giraffe02_1x.png">
		 <figcaption> 图片内容</figcaption>

	</figure>
	<p> 其它文本内容</p>
//css

figure {
		width: 512px;
		position: relative;
	}
	figure img {
		display: block;
		max-width: 100%;
	}
	figcaption {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,.3);
		color: #fff;
		font-size: 14px;
		line-height: 2;
		padding: 0 1em;

	}

自动计算

这些值可以不指定
- top
- left
- right
- bottom
- width
- height
如果冲突怎么办？

//html
	 <p>
	 	Coalhouse Fort is an English artillery fort built in the 1860s to guard the lower Thames from seaborne attack. It stands at Coalhouse Point in Essex on the north bank of the river, at a location near East Tilbury that was vulnerable to raiders and invaders. It was the last in a series 
	 </p>
	 <div class="box">
	 	绝对定位内容
	 </div>
	 <p>
	 	Coalhouse Fort is an English artillery fort built in the 1860s to guard the lower Thames from seaborne attack. It stands at Coalhouse Point in Essex on the north bank of the river, at a location near East Tilbury that was vulnerable to raiders and invaders. It was the last in a series 
	 </p>
//css

	.box {
		position: absolute;
		background: #f00;
		color: #fff;
	}

position:fixed

相对于viewport
不会随着页面滚动发生位置变化

//html
 <nav>
        <a href="#"> 首页</a>
        <a href="#"> 导航1</a>
        <a href="#"> 导航2</a>
    </nav>
    <main>
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
    </main>
    <a href="#" class="go-top"> 返回顶部</a>
//css

 nav {
        position: fixed;
        line-height: 2;
        background: rgba(0, 0, 0, .3);
        width: 100%;
    }

    nav a {
        padding: 0 1em;
        color: rgba(255, 255, 255, .7);
    }

    nav a:hover {
        color: #fff;
    }

    .go-top {
        position: fixed;
        right: 1em;
        bottom: 1em;
        color: #fff;
    }

    body {
        margin: 0;
        font-size: 14px;
    }

    a {
        color: #fff;
        text-decoration: none;
    }

    section {
        height: 66.667vh;
        color: #fff;
        text-align: center;
        font-size: 5em;
        line-height: 66vh;
    }

    section:nth-child(1) {
        background: #f44336;
    }

    section:nth-child(2) {
        background: #3f51b5;
    }

    section:nth-child(3) {
        background: #ffc107;
    }

    section:nth-child(4) {
        background: #607d8b;
    }

    section:nth-child(5) {
        background: #a4223f;
    }

position:fixed

文档流里离它最近的滚动元素、包含块

//html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="./css/style.css">
    </style>
</head>

<body>
    <article>
        <section>
            <h3>动物</h3>
            <div class="content"></div>
            <div class="comment">
                呀，这只喵喵萌翻了~！！
            </div>
        </section>
        <section>
            <h3>新闻</h3>
            <div class="content"></div>
            <div class="comment">
                靠，这也行。牛 B
            </div>
        </section>
        <section>
            <h3>人物</h3>
            <div class="content"></div>
            <div class="comment">
                呦呦呦，美人儿~
            </div>
        </section>
        <section>
            <h3>娱乐八卦</h3>
            <div class="content"></div>
            <div class="comment">
                标题党，差评！！
                <br/> 标题党，差评！！
            </div>
        </section>
        <section>
            <h3>时事</h3>
            <div class="content"></div>
            <div class="comment">
                加油，挺住。
            </div>
        </section>
        <section>
            <h3>动物</h3>
            <div class="content"></div>
            <div class="comment">
                又是萌猫一只，这小爪子怎么可以这么可爱！！！
                <br/> 又是萌猫一只，这小爪子怎么可以这么可爱！！！
            </div>
        </section>
    </article>
</body>
<script type="text/javascript" src="./js/script.js"></script>

</html>

//css

article {
    margin: 3rem 0 50vh;
    /* 50vh 足够 sticky “滚” */
    font-size: 0.875em;
}

section {
    margin-bottom: 2rem;
}

section h3 {
    margin: 0;
    background-color: lightgrey;
    padding: 0.5em 1em;
    z-index: 1;
    /* z-index 里面最高的 */
}

section .content {
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: gray;
    position: relative;
    /* z-index 初始要盖住 comment */
    background-color: lightgoldenrodyellow;
}

section .content::after {
    content: '自行脑补...';
}


.comment {
    padding: 1em;
    background-color: pink;
}



/**
 * sticky
 */

h3 {
    position: sticky;
    top: 0;
}

.comment {
    position: sticky;
    bottom: 40vh;
    /* 出来的位置 */
    z-index: -1;
    /* z-index 初始藏后门 */
}

z-index 堆叠层次

为定位元素(非static)指定其在z轴的上线等级
用一个整数表示，数值越大，越可以用户
初始值 auto，可以是负数 0 正数

//html
    <div class="box-a">Box a</div>
    <div class="box-b">Box b</div>
    <div class="box-c">Box c</div>
//css

[class^="box-"] {
    position: absolute;
    width: 200px;
    line-height: 200px;
    text-align: cneter;
    color: #fff;
}

.box-a {
    background: #f44336;
}

.box-b {
    top: 100px;
    left: 100px;
    z-index: -1;
    background: #0097a7;
}

.box-c {
    top: 150px;
    left: 150px;
    z-index: 1;
    background: #4caf50;
}

z-index 大的一定在上面吗

//html
	<nav>
		<ul>
			<li>菜单1</li>
			<li>菜单2</li>
		</ul>
	</nav>
	<div id="dialog">
		dialog content
	</div>
//css
nav {
 		position: fixed;
 		top: 0;
 	}
 	nav ul {
 		position: absolute;
 		z-index: 2;
 		top: 0;
 		left: 0;
 		background: red;
 		padding: 1em;
 		width: 10em;
 	}

 	#dialog {
 		position: absolute;
 		z-index: 1;
 		top: 5em;
 		left: 5em;
 		background: blue;
 	}

堆叠上下文

这里写图片描述

堆叠上下文的生成

root元素
z-index 值部位auto 的定位元素
设置了某些css3 属性的元素比如 opacity transfrom animation 等

绘制顺序

在每一个堆叠上线文中，从下到上
- 形成该上下文的元素的border和background
- z-index为负值的子堆叠上下文
- 常规流内的块级元素非浮动子元素
- 非定位浮动元素
- 常规流内非定位行级元素
- z-index 为0 的自元素或堆叠上线文
- z-index 为正数的子堆叠上下文

块级元素标签

<header>, <footer>
<main>, <article>, <section>
<aside>, <nav>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<div>, <p>
<dl>, <dt>, <dd>
<ol>, <ul>, <li>

<form>, <table>

<pre>, <blockquote>, <address>

<hr>
<fieldset>, <figcaption>, <figure>
<hgroup>, <details>, <dialog>

爱lv行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
奇舞-定位和堆叠-笔记

定位模式(Positioning schemes)常规流(Normal Flow)浮动(FLoat)绝对定位(Absolute Positioning)positionstatic 非定位默认值relative 相对定位 (相对自己)absolute(绝对定位，相对非static 祖元素定位)fixed ，相对视口绝对定位relative在常规流里面布局相对于自己本本应该的位
复制链接

扫一扫