css怎么通过子元素定位父元素

html-css014

css怎么通过子元素定位父元素,第1张

<div clas="a"> 少了一个s <div class="a">

类是具有相同属性元素的集合,既然a中每个都不一样,为什么还要统一定为a类呢?这是其一;

其二,父元素的高度是会随着子元素高度变化而变化的,所以一般在做页面的时候,我们是不设置这个高度的,除非有特殊要求;

其三,如果a类的其它属性都相同,只有宽度不同,可以同时让外层div具有两个类,例如:

<div class="a w1">

<div class="b">

</div>

</div>

<div class="a w2">

<div class="c">

</div>

</div>

<div class="a w3">

<div class="d">

</div>

</div>

其中a、w1、w2、w3都是类名,你可以在w1、w2、w3中定义不同的宽度,这样即满足了a中属性值全部相同,又满足了父元素具有不同宽度的要求。

position 属性指定了元素的定位类型。它有五个属性,分别是

static:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative:相对定位元素的定位是相对其正常位置。

fixed:元素的位置相对于浏览器窗口是固定位置。注:即使窗口是滚动的也不会移动

absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。注:定位使元素的位置与文档流无关,因此不占据空间。定位的元素和其他元素重叠。

sticky:基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器,首先设置一个容器div,然后设置一个用来演示效果的div,分别设置class属性名为container和fixed:

2、在style标签中设置样式,设置container的position属性为相对定位,并且给它一个很高的高度,然后给fixed设置高度和宽度,以及颜色等属性,这里的重点是设置position属性为fixed,以及设置top和left属性控制div的位置,设置完成后保存文件:

3、打开浏览器,可以看到div并且可以观察到进度条是最上面的:

4、接着将进度条拉倒最下面,可以发现div还是在原来的位置保持不变。以上就是用fixed属性设置div固定位置的方法: