前端入门篇(二十七)定位

固定定位

使用具体的像素,并且滚轮滚动时不会改变位置 css文件:
div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    
    position: fixed;
    bottom: 200px;
    right: 30px;
}

html文件:

<div class="div1">div1div>

效果:滚动页面时,div1位置不变
前端入门篇(二十七)定位_第1张图片

相对定位

可类比为“灵魂”出窍,但“肉体”不动,根据父级做位置调整

css文件:

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
}
.div1 {
    position: relative;
    top: 50px;
    left: 50px;
}

html文件:

<body>
    <div class="div1">div1div>
    <div class="div2">div2div>
body>

效果:
前端入门篇(二十七)定位_第2张图片

css文件:

div {
    width: 200px;
    height: 300px;
    background-color: yellow;
    border: 1px solid black;
    /* position: fixed;
    bottom: 200px;
    right: 30px; */
}

.container {
    margin: auto;/* 居中 */
    background-color: greenyellow;
}

.div1 {
    position: relative;
    top: 50px;
    left: 50px;
}

效果:
前端入门篇(二十七)定位_第3张图片

绝对定位

和浮动float类似,像绑气球,“灵魂不在,肉体也不在”
官网链接

在body中

css文件:
div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
}
.div1 {
    position: absolute;
    top: 50px;
    left: 50px;
}

html文件:

<body>
    <div class="div1">div1div>
    <div class="div2">div2div>
body>

效果:
前端入门篇(二十七)定位_第4张图片

在div中

css文件:
div {
    width: 200px;
    height: 300px;
    background-color: yellow;
    border: 1px solid black;
}

.container {
    margin: auto;/* 居中 */
    background-color: greenyellow;
}

.div1 {
    position: absolute;
    top: 100px;
    left: 100px;
}

html文件:

<body>
    <div class="container">
        <div class="div1">div1div>
    div>
    
    <div class="div2">div2div>
body>

效果:div1并不在container中,而是相对body做位置(top,left)调整
原因:
绝对定位会一层层向上寻找,直到找到有一个父级是带有position样式的,就依据这个父级做位置调整,找不到position样式,就用默认的,以body为参考调整位置
前端入门篇(二十七)定位_第5张图片
代码修改:
css文件:

div {
    width: 200px;
    height: 300px;
    background-color: yellow;
    border: 1px solid black;
    /* position: fixed;
    bottom: 200px;
    right: 30px; */
}

.container {
    margin: auto;/* 居中 */
    background-color: greenyellow;
    position: relative;
}

.div1 {
    position: absolute;
    top: 50px;
    left: 50px;
}

html文件不变
效果:
前端入门篇(二十七)定位_第6张图片

你可能感兴趣的:(前端入门,css3)