CSS基础篇-- position属性讲解

摘要：为属性的默认值，元素会遵循正常的文档流，且会忽略等属性。粘性定位常用于定位字母列表的头部元素。须指定或四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值：

1. position: static

2. position: inherit

3. position: relative

4. position: absolute

5. position: fixed

6. position: sticky(new)

依次讲解这6个值的应用。

position: static

static 为position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。

position: inherit

inherit 值如同其他 css 属性的 inherit 值，即继承父元素的 position 值。

position: relative

relative 元素遵循正常的文档流，所以周围元素不会忽略它的存在，relative 元素同样支持 top,bottom,left,right 等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于， relative 元素周围的元素将会忽略 relative 元素的移动。我们注意，当 relative 元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略 relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动，我们用个例子来说明：

Im a relative element
Im a default element

//并未忽略 relative 元素的存在

Im a relative element
Im a default element

//忽略了 relative 元素的移动

position: absolute

absolute 元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。

这个绝对定位需要稍微理解下，因为这里容易与 relative 产生混淆。

例如，当对 absolute 元素添加 left:10px 定位后，这个 left 究竟是对哪个元素而言呢？其实，此时将会往上查找 absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left:10px 就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

Im an absolute element
Im a default element

//直接忽略 absolute 元素的存在

position: fixed

fixed 元素将会脱离正常的文档流，所以它与 absolute 元素很相似，同样会被周围元素忽略，支持 top,bottom,left,right 属性，但两者仍有很大不同。

首先，fixed 元素定位与它的父元素无任何关系，它永远是相对最外层的 window 进行定位的。

第二，fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会因为屏幕的滚动而消失。

position: sticky

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

HTML 内容:


  
    A
    Andrew W.K.
    Apparat
    Arcade Fire
    At The Drive-In
    Aziz Ansari
  
  
    C
    Chromeo
    Common
    Converge
    Crystal Castles
    Cursive
  
  
    E
    Explosions In The Sky
  
  
    T
    Ted Leo & The Pharmacists
    T-Pain
    Thrice
    TV On The Radio
    Two Gallants

CSS 内容:

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}
dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
dd + dd {
  border-top: 1px solid #CCC
}

兼容性如图所示：

z-index

为什么要在这里提到 z-index 属性呢？那是因为 z-index 属性只对定位元素有效，即 position 值为 absolute,relative,fixed 时才有效。我们首先了解下什么叫 z-index。

从上图我们不难发现 z-index 值代表的是元素的堆叠顺序，值越高则显示顺序越优先。

Im an absolute element
Im a fixed element

//fixed 元素 z-index 比 absoulute 元素高，所以显示在前面

（我把背景色调为非透明，这样可以看得更清楚），假如 z-index 值相同会出现什么情况呢？

Im an absolute element
Im a fixed element

//z-index 值相同，仍然显示为 fixed 元素

所以我们知道，当 z-index 值相同时，后加载的元素显示优先。

关于z-index属性, 上下的层次关系也是按照树状结构进行层次划分的, 优先父元素之间的分集, 子元素这层次排序依赖于父元素的层次.

例如:

某A元素z-index:1; 其父元素z-index:100,

某B元素z-index:100; 其父元素z-index:99,

某C元素z-index:2; 其父元素与A相同

则浏览器之中A元素的显示层次一定优高于B元素; C显示的层次高于A元素;

参考

mozilla:position

使用 position:sticky 实现粘性布局

参考地址：

基础篇章：React Native 之 TextInput 的讲解

【回复“1024”，送你一个特别推送】

（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）

今天我们讲解的是React Native基础系列之TextInput的讲解，如果想学习更多的开发知识或者移动开发文章，欢迎大家关注我的微信公众号：非著名程序员（smart_android）。

TextInput 是一个允许用户输入文本的基础组件。它有一个onChangeText的属性，该属性接受一个函数，每当文本输入发生变化时，此函数就会被调用。它还有一个onSubmitEditing的属性，当文本输入完被提交的时候调用。

官网例子

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '').join(' ')}
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

效果图如下：

这个例子实现的功能就是当我们在文本输入框里输入一个单词时，该单词就会换成，如果输入的是一句话或者很多单词，就会实时动态的把一句话拆成以一个一个的单词，然后替换成。比如："Hello there Bob"将会被翻译为""。

解释

如果你们不懂js的话，可能看着有点困难，所以学React Native的时候，大家最好先去看看js，至少得懂一些。

再说一遍，以后就不解释了，不懂js语法的自行去学习。

属性方法

placeholder：占位符，默认显示信息，在输入前显示的文本内容。相当于android中的hint，当有输入的内容时被清除。

placeholdertTextColor: 占位符文本颜色。

value：文本输入框的默认值。

password：如果为true ，则是密码输入框，文本显示为＊＊＊。

multiline：如果为true ，则是多行输入。

editable：如果为false ，文本框不可输入。其默认值事true。

autoFocus: 如果为true，将自动聚焦。

clearButtonMode : 枚举类型，可选值有never，while－enditing , unless-editing,always。用于显示清除按钮。

maxLength: 输入文本框能够输入的最长字符数。

keyboardType：输入框的键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该功能用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。

onChangeText: 当文本输入框的内容发生变化时，调用该函数。onChangeText接收一个文本的参数对象。

onChange: 当文本变化时，调用该函数。

onEndEditing: 当结束编辑时，调用该函数。

onBlur: 失去焦点触发事件，回调该函数。

onFocus: 获得焦点触发该监听事件。

onSubmitEditing: 当结束编辑后，点击键盘的提交按钮出发该事件。但是当multiline={true}的时候，该属性就会失效。

secureTextEntry：设置是否为密码安全输入框，默认为false。

textAlign：设置文本横向布局方式可选参数('start', 'center', 'end')

textAlignVertical：设置文本垂直方向布局方式可选参数('top', 'center', 'bottom')

underlineColorAndroid：设置文本输入框下划线的颜色

autoCorrect：设置拼写自动修正功能默认为开启(true)

onLayout：当组件布局发生变化的时候调用

numberOfLines：number设置文本输入框行数，使用该功能需要先设置multiline为true,设置TextInput为多行文本。

TextInput实践效果图

废话不多说，结合我们之前学的一些基础，再加上TextInput的知识，我们现在练习一个demo，巩固一下以前的知识点。效果图如下：

demo代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

class TextInputDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.top_half_view}>
          <View style={styles.title_view}>
             <Text style={styles.title_text}>
               邮箱登录
            </Text>
          </View>

          <TextInput 
              style={styles.textinput}
              placeholder='邮箱'
              numberOfLines={1}
              autoFocus={true}
              underlineColorAndroid={'#e1e1e1'}
          />
           <TextInput 
              style={styles.textinput}
              placeholder='密码'
              numberOfLines={1}
              secureTextEntry={true}
              underlineColorAndroid={'#e1e1e1'}
          />
          <View style={{backgroundColor:'#ffffff',flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
             <View style={styles.style_view_register}>
              <Text style={{color:'#5ac4ef'}}>
                注册
              </Text>
             </View>

             <View style={styles.style_view_login}>
              <Text style={{color:'white'}}>
                登录
              </Text>
             </View>
          </View>
          <Text style={styles.bottom_text}>
            忘了密码?点此找回
          </Text>
        </View>
        <View style={styles.bottom_half_view}>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
  title_text:{
    color:'white',
    fontSize:22,
    marginLeft:20,
    textAlign:'center'
  },
  top_half_view:{
    flex: 1.3,
    backgroundColor: 'white',
  },
  bottom_half_view:{
    flex: 1,
    backgroundColor: '#eeeeee',
  },
  textinput: {
    backgroundColor:'#fff',
    marginTop:5,
    marginLeft:20,
    marginRight:20,
    textAlign:'left',
  },
  style_view_login:{  
      flex:1,
      marginTop:20,
      marginLeft:20,
      marginRight:20,
      backgroundColor:'#27b5ee',
      height:35,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_register:{  
      flex:1,
      marginTop:20,
      marginLeft:20,
      marginRight:20,
      borderColor:'#5ac4ef',
      borderWidth: 1,
      height:35,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  bottom_text:{
    color:'#27b5ee',
    fontSize:14,
    marginTop:10,
    marginLeft:20,
    textAlign:'left',
    fontWeight:'bold'
  },
});

AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);

到这里关于TextInput的知识点我们就讲的差不多了，希望大家亲自实践去实现一下上面的例子，肯定会收获很多，想学更多开发知识，欢迎大家关注微信公众号：非著名程序员（smart_android）。

CSS基础篇-- position属性讲解

最新发布

基础型企业网站论文

企业网站实现外网访问

国外建立企业网站

凌云贺州企业网站建设

花都企业网站费用

企业网站访问

通州企业网站制作价格多少

企业网站国家有补助吗

热门标签

CSS基础篇-- position属性讲解

相关文章

最新发布

基础型企业网站论文

企业网站实现外网访问

国外建立企业网站

凌云贺州企业网站建设

花都企业网站费用

企业网站访问

通州企业网站制作价格多少

企业网站国家有补助吗

热门标签