标签: css-position

我试图将其fofam(h1)置于页面的中心。但由于nav和logo，我遇到了麻烦。帮助？我已经尝试修复它有一段时间了，但我似乎无法让它发挥作用。我尝试过内联等。

<style>
    header {
        height:300px;
        margin:0 auto;
        background:#21628c;
        font-family:arial;
        text-transform:uppercase;
    }
    div.logo svg{
        float:left;
        padding:10px 30px;
        display:inline-block;
    }
    nav{
        float:right;
        color:#000000;
        display:inline-block;
        padding: 20px 20px;
    }
    nav a{
            margin-left:30px;
            color:black;
    }
    nav a:hover{
        color:white;
        font-size:20px;
    }
    h1{
        color:white;
        font-size:72px;
        text-align:center;
        display:inline-block;
        position:relative;

    }
    h1 span{
        border:10px solid white;
        padding: .2em .5em; 
    }
    p.descripton{
        text-align:center;
        color:white;

    }
</style>
<header>
    <title>Mikhaila</title>
    <div class="logo"><svg...</svg></div>
    <nav>
        <a href="">Mission</a>
        <a href="">Events</a>
        <a href="">Contact Us</a>
    </nav>
    <h1><span>FOFAM</span></h1>
    <p class="descripton">Friends of …

我试图在中心对齐 div，但 text-align: center 和 margin: 0 auto 似乎都不适用于绝对定位的元素。我假设两者都不适用于绝对定位的元素。在这种情况下，我该怎么办呢？

#wrap {
  border: 1px solid black;
  position: relative;
  width: 500px;
  height: 250px;
  margin: 0 auto;
  text-align: center;
}
#absolute {
  border: 1px solid red;
  position: absolute;
  display: block;
  bottom: 0;
  margin: 0 auto;
  cursor: pointer;
}

<div id='wrap'>
  <div id='absolute'>Click Me</div>
</div>

我想绝对定位一个div，但它没有粘在顶部，而是有一个空格。容器有position:relative，内部块有position:absoluteCSS规则。我尝试使用代码并注意到更改背景位置有一些效果，但我不知道为什么。

<header>
   <div class="header-wrapper">
      <div class="header-slogan-1 text-center">Base info</div>
   <div class="header-info">Info</div>
   </div>
</header>

我想要的是顶部有绿色块（参见小提琴）。

这是小提琴

请任何人都可以解释这种行为并回答为什么该块从顶部移动？

这是示例： https: //jsfiddle.net/5ahw3tec/

超文本标记语言

html body {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Noto Sans KR', sans-serif;
    list-style: none;
}

    a {
    text-decoration: none;
}

    body {
    background: lightgrey;
    margin: 0;
}

    .container {
    background-color: #ffffff;
    width: 1280px;
    padding: 0;
}

    #gnb {
    width: 1280px;
    height: 80px;
    z-index: 100;
    position: fixed;
}

    #gnb .header-area img {
    position: relative;
    top: 25px;
    left: 80px;
}

    #gnb .header-area nav {
    position: relative;
    width: 930px;
    left: 280px; …

我的固定标题和固定列表有问题。标题是固定的，但列不是。那么我该如何解决这个问题呢？我试图给第一列位置：固定，但它不能正常工作。如果可能的话，不用Javascript。（我试图从同一主题的早期问题中找到解决方案，但这些都没有帮助我）。这是我的Codepen。

body {
  background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}

h3 {
  margin: auto;
  text-align: center;
  padding: 10px;
  color: white;
}

.table {
  background-color: white;
  margin: auto;
  width: 600px;
  border-collapse: separate;
  display: block;
  overflow-x: scroll;
}

thead,
tbody {
  display: inline-block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 70px;
  position: relative;
}

th {
  background-color: lightgrey;
}

td,
th {
  min-width: 100px;
  max-width: 100px;
  word-wrap: break-word;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <h3>World Cup 2018</h3>

  <table class="table table-bordered">
    <thead>
      <tr>
        <th></th>
        <th …

请看下面这个非常简单的片段来说明我的问题：

#container {\r\n  position: relative;\r\n  padding: 20px;\r\n  border: 2px solid gray;\r\n}\r\n\r\n#back {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 50%;\r\n  left: 0;\r\n  right: 0;\r\n  background-color: #bbb;\r\n}

<div class="col-sm-12" id="container">\r\n  <div id="back"></div>\r\n  <h1>Some Text</h1>\r\n</div>

\n\n

在 HTML 代码中，标记h1位于元素之后。back

由于我没有改变它的position属性，所以它一定是static。\n而且，据我所知，static元素是根据页面的流程定位的。

那么\xe2\x80\xa6 为什么绝对定位div 显示在其同级之上h1？

我期待在后面看到它，h1因为它是第一位的。

请注意，我知道如何纠正这种行为，我只是问为什么！

带有更正的片段：

#container {\r\n  position: relative;\r\n  padding: …

我正在尝试创建一个具有水平和垂直以及粘性标题和第一列的网格。

我用它来使标题粘住

 .thead {
     position: sticky;
     top: 0px;
 }

我用它来使第一列具有粘性。

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

但我得到了一个奇怪的滚动行为，即第一列标题粘在左侧而不是顶部。

这是我使用的代码。我怎样才能让它工作，以便第一个列标题将同时粘在左侧和顶部？

 .thead {
     position: sticky;
     top: 0px;
 }

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

我想构建一个汉堡菜单以显示在我的 React 16.13.0 应用程序的移动版本上。我正在关注本教程 - https://www.zacwillmington.com/how-to-add-a-hamburger-menu-to-your-website/。所以我像这样创建了我的导航栏组件

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import HamburgerMenu from 'react-hamburger-menu';
import {isMobile} from 'react-device-detect';
import './NavBar.css';

class NavBar extends Component {
    constructor(){
        super()
        this.state = {
            open: false,
            hideOrShowHambugerDropDown: 'nav'
        }
    }

    handleClick = () => {
        this.setState({open: !this.state.open});
    }

    displayHamburgerMenu = () => {
        return (
            <HamburgerMenu
                    isOpen={this.state.open}
                    menuClicked={this.handleClick.bind(this)}
                    width={18}
                    height={15}
                    strokeWidth={1}
                    rotate={0}
                    color='black'
                    borderRadius={0}
                    animationDuration={0.5}
                />
        )
    }

    displayNavBar = () => {
        return …

v-overlay当在 a 中使用绝对值时v-col，覆盖层会覆盖其所有祖父母，v-row而不仅仅是其父母v-col。

“绝对覆盖绝对定位并包含在其父元素内部。”

-Vuetify 的文档

这是codepen 上的演示

我试图将一些元素放在页面上的绝对位置.我使用了以下测试代码(我将<>替换为[]以通过HTML清理程序):

<body>
  <div style="position=absolute; top=100px; left=100px"> HELLO 100,100</div>
  <div style="position=absolute; top=200px; left=100px"> HELLO 200,100</div>
  <div style="position=absolute; top=0px; left=0px"> HELLO 0,0</div>
</body>

这样做显然应该在IE中做,但只是在FF(3.0)中将div一个接一个地流动.我知道CSS支持变化很大.我缺少什么,是否有更标准的方法来做到这一点？