css的定位笔记

wuyangchun 发布于2019-04-23 13:14 / 820人阅读

摘要：不论其父元素和相邻元素的是什么，均相对于自身原来的位置来偏移。原来是行内元素，设置相对定位后，依然是行内元素。相对于最近的一个不为的父元素来定位，如果没有，则相对于来定位，注意此处网上很多资料说是相对于来定位，下文会进行验证。

relative：相对定位。 1. 不论其父元素和相邻元素的position是什么，均相对于自身原来的位置来偏移。 2. 不会脱离文档流，其原来的位置依然保留着，不会被文档中其他的元素占用。 3. 原来是行内元素，设置相对定位后，依然是行内元素。 4. 设置了相对定位的块级元素，如果没有设置宽度，其宽度依然是拉伸至父元素宽度的100%。下面是demo

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位title>
head>
<style>
    .A {

        background: yellow;
        height: 100PX;
        width: 100PX;

    }

    .B {
        background: red;
        height: 100PX;
        width: 100PX;
        position: relative;
        top: 20PX;
        margin-top: 20PX; 
        margin-bottom: 20px;
        /* 相当于以前的位置先向20px;在top原来的位置20px; */
        /* bottom: ; */
    }

    .C {
        background:green;
        height: 100PX;
        width: 100PX;

    }
    span{
       position: relative;
       top: 50px;
    }
    input{
        width: 20px;
        height: 30px;
      }
      span{
         position: relative;
          width: 100px;
          height: 100px;
          background: red;
          /* 行内元素不会影响宽高 */
      }
style>

<body>
    
    <div class="A">div>
    <div class="B">div>
    <div class="C">div>
    <input type="text" class="D">
    <span>输入span>
body>

html>

李南江老师视频笔记

absolute：绝对定位。 1. 相对于最近的一个position不为static的父元素来定位，如果没有，则相对于html来定位，注意：此处网上很多资料说是相对于body来定位，下文会进行验证。 2. 设置了绝对定位的行内元素，会转化为块级元素，可以设置宽高。 3. 设置了绝对定位的块级元素，如果没有设置固定宽度，则其宽度不会自动拉伸至父元素的100%，而是由内容和内边距的宽度来决定的。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位title>
head>
<style>
    div {
        height: 100px;
        width: 100px;

    }

    .A {
        background: red;
    }

    .B {
        background: green;
        position: absolute;
        /* right: 0; */
        /* /* top: 0; */
        bottom: 0;
        /* 脱离流元素，相对于body的位置 */
    }


    .C {
        background: blue;
    }

    span {
        position: absolute;
        width: 100px;
        height: 100px;
        background: yellow;
        /* 行内元素不会影响宽高 */

    }
style>

<body>
    <div class="A">div>
    <div class="B">div>
    <div class="C">div>
    

body>

html>

子绝父相

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<style>
    /* 如果用相对定位则不居中，如果使用绝对定位是按当前屏幕决定位置，会随屏大小移动 */
    *{margin: 0;
      padding: 0;
      }
    ul{
        list-style: none;
        height: 50px;
        width: 700px;
        margin: 0 auto;
        margin-top: 100px;
        
    
        
    }
    ul li{
        float: left;
        text-align: center;
        width: 100px;
        line-height: 50px;
        background: RGB(184,184,184);
        
    }
    ul li:nth-of-type(4){
        position: relative;
        background: #aad;
    }
    ul li img{
       position: absolute;
       top: -13px;
       left: 42px;

    }
style>
<body>
    <ul>
        <li>京东时尚li>
        <li>美妆馆li>
        <li>超市li>
        <li>生鲜
            <img src="./images/FAQa.gif" alt="">
        li>
        <li>闪购li>
        <li>拍卖li>
        <li>金融li>
    ul>
body>

html>

GPU云服务器云服务器中的绝对定位 html 图片的定位我的位置定位地图图片 html里的定位吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1611.html

【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
《Python web开发》笔记三: CSS基础

摘要：计算方式一个行内样式，一个，一个属性选择器或者伪类，一个元素名，或者伪元素。其他规则见拓展阅读。绝对定位设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。 CSS常用选择器 - 通配符选择器 * - id选择器(id #) - 类选择器(class .) - 元素选择器(E) - 后代选择器(E F) - 子元素选择器(E>F) - 相邻...

Scorpion 2019-08-29 12:14 评论0 收藏0
《Python web开发》笔记三: CSS基础

摘要：计算方式一个行内样式，一个，一个属性选择器或者伪类，一个元素名，或者伪元素。其他规则见拓展阅读。绝对定位设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。 CSS常用选择器 - 通配符选择器 * - id选择器(id #) - 类选择器(class .) - 元素选择器(E) - 后代选择器(E F) - 子元素选择器(E>F) - 相邻...

qylost 2019-07-31 12:23 评论0 收藏0
【零基础入门】 css学习笔记（4）布局与定位介绍

摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...

nevermind 2019-08-30 15:53 评论0 收藏0
【CSS学习笔记】绝对定位的父类参照物的确定

摘要：今天看定位的课程，了解到一个元素要设置绝对定位，需要确定一个父类或者祖先类参照物，默认是根元素。第三步，在第二步的基础上给添加属性声明小结唉，这次却被擒获了唉，怎么回事没错，做绝对定位的祖先参照物，是设置了相对定位且离最近的那个祖先类元素。今天看CSS定位的课程，了解到一个元素要设置绝对定位，需要确定一个父类或者祖先类参照物，默认是根元素html。这个默认根元素已经明确，但是祖先类元...

cooxer 2019-08-28 18:28 评论0 收藏0