div在相对父元素实现绝对定位

最新推荐文章于 2024-07-18 20:06:09 发布

机制的盐酸

最新推荐文章于 2024-07-18 20:06:09 发布

阅读量4.8k

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_36170443/article/details/106689382

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1.前言

在学习前台做练手项目是遇到：div 使用 position:absolute;和left:0px不能实现相对父元素实现绝对定位。在百度时灵光一闪，使用margin-left实现需求。

2.css中的position属性

平时用的的属性值有以下几个：

rerelative (相对定位)
absolute (绝对定位)
fixed (固定)
static (静态)
sticky （粘性定位）

重点来讲讲 absolute和fixed的区别，absolute定位的元素绝对定位于最相近的定位父元素，如果一个div 的属性如下：

<style>
	.ab-nav {
		width: 400px;
		height: 50px;
		margin: 10px auto;
		border: 1px solid green;
	}
	.ab-nav-item {
		margin: 10px 10px 0 10px;
		border: 1px solid blue;
		line-height: 40px;
		float: left;
	}
</style>

<div class="ab-nav">
	<div class="ab-nav-item">
		<span>目录</span>

	</div>
	<div class="ab-nav-item">
		目录1
		<div class="pop">
		</div>
	</div>
	<div class="ab-nav-item">
		目录2
	</div>
</div>

效果图：

我们想要的效果如下：鼠标移到目录1时，粉色的div弹出的位置如下所示

如果使用relative

/*添加粉框（pop）的样式*/
.ab-nav-item .pop {
    width: 100px;
    height: 200px;
    border: 1px solid deeppink;
    position: relative;     /*设置相对定位*/
    left: -55px;           /*粉框相对左移*/
}

relative效果图

可以看出：粉色框虽然实现效果，但是元素还占用着原有的位置，界面非常不美观。

使用position和left组合：

/*修改粉框（pop）的样式*/
.ab-nav-item .pop {
    width: 100px;
    height: 200px;
    border: 1px solid deeppink;
    position: absolute;     /*设置绝对定位*/
    left: 0;           /*距离左边为0*/
}

效果图：

这是的元素absolute定位和position值为fixed是相同的效果,这是为什么呢？按照我个人理解，问题出在“left:0”属性上，设置left之后父元素对象为<html> ，而不是最近的父元素“目录1”的div,。

fixed定位的元素对象为浏览器窗口，所以效果看起来是一样的，但是两者又有不同，随着窗口是滚动fixed定位的元素也不会移动：absolute定位的元素会随着窗口滚动而滚动。

这时设置fixed和absolute是相同的效果。（自学摸索的理解，如有不对希望大佬指出。）

最后实现

/*修改粉框（pop）的样式*/
.ab-nav-item .pop {
    width: 100px;
    height: 200px;
    border: 1px solid deeppink;
    position: absolute;     /*设置绝对定位*/
    margin-left: -60px;     /*设置距离父元素-60px*/
}

效果图