Change position in observation

Posted 2021-01-08 cheeseice

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Change position in observation相关的知识，希望对你有一定的参考价值。

<!DOCTYPE HTML>
<HTML>
<head>
    <meta charset="    UTF-8">
    <title>position</title>
    <link rel="stylesheet" type="text/css" href="indextype.css">
</head>
<body>
    </form>
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>
    <br>
</body>
</HTML>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  /*position:static;*/
  top: 20px;
  left: 20px;
  background: blue;
}

CSS代码，当改变position的值时：

0 没position时：

技术分享图片

1 技术分享图片

技术分享图片

This is the default value.

2 技术分享图片

技术分享图片

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

元素根据文档的正常流进行定位，然后根据顶部、右侧、底部和左侧的值相对于自身进行偏移。偏移量不影响任何其他元素的位置;因此，页面布局中元素的空间与静态位置相同。

3 技术分享图片

技术分享图片

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport,

4 技术分享图片

技术分享图片

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

5 技术分享图片

技术分享图片

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

由于有些效果一样，于是我增加网页显示的长度，出现了其他的效果，

我把box加在在以前写过的html后面，出现了下面的效果：

传视频在博客上，利用优酷的话，要先认证。我还在认证，过几天再传视频的效果图啦。

<!DOCTYPE html>     <!--浏览器得知自己的处理内容是html-->
<!--<!DOCTYPE html>-->    
 <!--注释-->
<!--<html lang="en">    
    <!--文档中html部分的开始，en英语zh中文-->
<html>
<head>    <!--提供有关文档的内容和注释信息的-->
    <meta charset="UTF-8">        <!--一种编码方式-->
    <title>blogs</title>    <!--head里面必须有title元素-->
    <link rel="stylesheet" type="text/css" href="indextype.css">>
</head>
<body>
    <!--hypertext reference-->
    <a href="https://www.cnblogs.com/" target="_blank">blogs a</a>
    <a href="https://www.cnblogs.com/"> blogs b</a>
    <a href="https://www.cnblogs.com/" target="_self">blogs c</a>

***************************************
    <!--bold type-->
    <b>blogs</b>
    <!--emphasis-->
    <em>blogs</em>
    <!--下划线-->
    <u>blogs</u>
    <!--中间横线-->
    <s>blogs</s>
    <hl>
        啦啦啦啦啦啦啦啦
    </hl>

******************************************
    <table  border="1px" align="center">
        <thead>
        <tr>    <!--加粗居中-->
            <th>用户名</th>
            <th>性别</th>
            <th>密码</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Admin</td>
            <td>man</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Admin12334567</td>
            <td>man</td>
            <td>123</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>    
            <td>用户名</td>
            <td>性别</td>
            <td>密码</td>
        </tr>
        </tfoot>
    </table>
<br>        <!--换行-->

<table border="1px">
    <tr>
        <th rowspan="2">444</th>    <!--行row-->    
        <th>444</th>
        <th>444444</th>
        <th>444</th>
    </tr>
    <tr>
        <td colspan="2">sdsd</td> <!--合并列单元格column -->
        <td>sdss</td>
    </tr>
    <tr>
        <td>sdsds</td>
        <td>sdsd</td>
        <td>sdsd</td>
        <td>sdsd</td>
    </tr>
</table>


******************************
<ol>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>
<ol reversed>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>
<ol type="a"><!--a A I -->
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>
<ol>
    <li>何将用户选择的内</li>
    <ol type="a">
    <li>他们会提到Flash</li>
    <li>中关键技术的支持的改进</li>
    </ol>
</ol>

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
********************************************************************************
<!--        表单        -->
<for method="get" action="6htmlform.php">
    <input type="text">
    <!--=<input>-->
    <br><br>
    <input type="text" value="blogs"><!--占位符-->
    <br><br>
    <input type="text" placeholder="blogs"><!--不占文本框内-->
    <br><br>
    <input type="text" placeholder="blogs" maxlength="8"><!--最大能输入的字符-->
    <br><br>
    <input type="text" placeholder="blogs" size="50"><!--拓宽单行文本框-->
    <br><br>
    <input type="text" value="blogs" readonly><!--只读-->
    <br><br>
    <input type="password" placeholder="密码">

    <textarea rows="20">aaaaaaaaaaadddddddddddddddggggggggggggggggggggggggaaa</textarea>
    <input type=button value="按钮">
    <button>按钮</button>         <!--js合作并且作为绑定事件的-->
    <input type="submit" value="提交"><!--提交表单-->
    <!--button>input button>input submit-->
    <input type="rang" min="-100" max="200" step="100">
    <input type="rang" min="-100" max="200" step="100" value="-100"><!--数字滑动-->
    <input type="number" min="-100" max="200"  value="-100"><!--手动输入数字-->
    <input type="checkbox">选择1<!--选择1-->
    <input type="radio">选择2
    你喜欢什么？
    <br>
    <input type="radio" name="d" checked>苹果
    <input type="radio" name="d">葡萄
    <input type="radio" name="d">琵琶
    <select>
        <option>苹果</option>
        <option>苹果2</option>
        <option>苹果3</option>
    </select>

    <input type="text" list="datalist111">
    <datalist id="datalist111">
        <option>苹果</option>
        <option>苹果2</option>
        <option>苹果3</option>
    </datalist>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <!--<input type ="email">
    <input type="tel">
    <input type="url">
    <input type="date">
    <input type="color">
    <input type="hidden" value="123">-->

    <input type="image" src="111.png" witn="80px"><!--图片按钮-->
    <input type="file" multiple><--上传多个文件-->
    <br>
    <br>

    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>
    <br>
    <br>
    <br>
    <br>
    <!--
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>-->
</body>
</html>
</form>

以上是关于Change position in observation的主要内容，如果未能解决你的问题，请参考以下文章

SE-555 A4: GPS Position Observer

从firebase onchange返回observable

[RxJS] Add debug method to Observable in TypeScript

[RxJS] Flatten a higher order observable with concatAll in RxJS

触发更改事件后，Kendo Observable 未更新

RxJS Observable Share startWith() state in merge()