Question

我需要水平居中一个具有aboslute位置的按钮（因为它必须保持在顶部，点击并启动叠加并单击以关闭叠加）位置固定的顶部栏，这里是代码：

.topbar {
    text-align: center;
    min-width: 100%;
    height: 50px;
    background-color: #29343a;
    position: fixed;
    top: 0;
}

.button {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(153,204,51,0.9);
}

这就是三个部分的CSS，网站更复杂，但我认为3个部分是关键。顶部栏必须固定在顶部，buton必须居中到顶部栏div，并且叠加层启动和顶部保持在叠加层的顶部。

工作原理：叠加层工作正常，按钮保持在顶部但不在顶部栏的水平居中。

我怎么能破解这个？

Answer 1

你可以使用left:0和right:0技巧。

.button {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 0; /*added*/
    right: 0; /*added*/
}

或者left:50%左边距为负（半宽）。

.button {
    display: inline-block;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 50%; /*added*/
    margin-left: -30px; /*added*/
}

或使用CSS3 transform。

.button {
    display: inline-block;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 50%; /*added*/
    transform: translateX(-50%); /*added*/
}

Answer 2

根据您提供的信息，我可以提出：

/* CSS */

.topBar {
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
background-color:#29343a;
}


.overlay {
display:none;
width: 100%;
background: rgba(153,204,51,0.9);
margin:0;
}

.button, .button:active, .button:visited, .button:hover {
display: block;
position:relative;
text-align:center;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
margin:0 auto;
padding:10px;
}

.topBar:hover > .overlay {
display:block;
}

我添加了一些HTML，因为你没有提供任何：

<!-- HTML -->
<div class="topBar">
    <a href="#" class="button">Button</a>
    <div class="overlay">
        <p>Some text shows when button hover</p>
    </div>
</div>

JSFIDDLE：https://jsfiddle.net/0napm6y3/

Answer 3

以下是此组件的完整代码：

这是反应组件，重叠启动是叠加var，另一个是按钮上的一个动画：

var React = require('react');

var StatusBarButtonView = React.createClass({
    getInitialState: function() {
    return {cliked: false};
    },
    handleClick: function(event) {
    this.setState({cliked: !this.state.cliked});
    },
    render: function() {
    var fondo = this.state.cliked ? 'active' : '';
    var overlay = this.state.cliked ? 'open' : '';

        return (
            <div>
                <div className={"aui-profit-statusbar-button-container " + (fondo)} onClick={this.handleClick}>
                    <img src="images/aui-navbar-element-icon-cross.png" className={"rotate " + (fondo)}/>
                </div>      
                <div className={"overlay overlay-slidedown " + (overlay)}>
                    <nav>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Work</a></li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        );
    }
});

module.exports = StatusBarButtonView;

这是topbar scss：

.aui-profit-statusbar-container {
    text-align: center;
    min-width: 100%;
    height: 50px;
    background-color: #29343a;
    position: fixed;
    top: 0;
}

这是按钮scss：

.aui-profit-statusbar-button-container {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;

    &:hover {
        background-color: #56d9f6;
    }

    &.active {
        background-color: #ff4b39;
        border-bottom: 2px solid #e43f30;
    }

    .rotate {
        margin-top: 13px;
        width: 23px;
        height: 23px;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -ms-transition-duration: 0,2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -ms-transition-property: -ms-transform;
        -o-transition-property: -o-transform;
        transition-property: transform; 
    }

    .active {
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }   
}

这是叠加css：

/* Overlay style */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(153,204,51,0.9);
}

/* Overlay closing cross */
.overlay .overlay-close {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 20px;
    top: 20px;
    overflow: hidden;
    border: none;
    background: url(../img/cross.png) no-repeat center center;
    text-indent: 200%;
    color: transparent;
    outline: none;
    z-index: 100;
}

/* Menu style */
.overlay nav {
    text-align: center;
    position: relative;
    top: 50%;
    height: 60%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
}

.overlay ul li {
    display: block;
    height: 20%;
    height: calc(100% / 5);
    min-height: 54px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.overlay ul li a {
    font-size: 54px;
    font-weight: 300;
    display: block;
    color: #fff;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
    color: #e3fcb1;
}

/* Effects */
.overlay-slidedown {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
    transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

@media screen and (max-height: 30.5em) {
    .overlay nav {
        height: 70%;
        font-size: 34px;
    }
    .overlay ul li {
        min-height: 34px;
    }
}

现在它完美无缺，感谢所有人。

接下来我需要做的是分开叠加buttom组件。并保持运行，但我想知道将动作传递给一个组件到另一个组件....我必须了解更多关于react.js

如何水平居中位置：绝对位置：固定容器

3 个答案: