CSS位置是：固定一个定位元件

内我有一个定位的div其内容可能太长，以便出现滚动条（overflow:auto集）。它在ajax应用程序中用作对话框。我想修复右上角的关闭按钮，所以当用户滚动div时不会滚动。CSS位置是：固定一个定位元件

我position:fixed; right:0; top:0 tryed它，但它不是放置在div（在Firefox）在页面的右上角的按钮。

是否有可能使用CSS来做到这一点按钮位置不只是在每次滚动事件在JS与offsetWidth /身高黑客攻击？

ps：div的高度和宽度不是固定值，它取决于内容的大小和浏览器窗口的大小。用户还可以调整它的大小，如果他想。

2011-02-10 Calmarius

这可能是值得考虑使用一个具有固定位置背景图像的div的按钮。 – cloudrave 2013-11-10 19:48:15

@NickM似乎是一个好主意，但是如何点击按钮呢？ – ithil 2014-11-07 08:51:08

@ithil只要div的高度和宽度设置为与背景图像的高度和宽度相匹配，就应该可点击。至于*处理*点击，这取决于你是否使用纯HTML或JS。如果它只是HTML，你可以用`href`将标签封装在`a`标签中（甚至可以用`a`标签代替`div`并将其设置为`display：inline-block`）。如果是JS，你可以听点击`div`。我正确理解你的问题吗？ – cloudrave 2014-11-07 19:10:43

您可以使用position:fixed;，但不设置left和top。然后，您将使用margin-left将它向右推，以将其定位在您希望的正确位置。

检查演示在这里：http://jsbin.com/icili5

来源

2011-02-10 20:39:00 Sotiris

Position:fixed给出关于浏览器窗口中的绝对位置。所以它当然会去那里。

虽然position:absolute指父元素，因此，如果您将容器< div>里面你<div>按钮，它应该位置，你的意思是它是。类似

编辑：感谢@Sotiris，谁有一个点，解决方案可以实现使用一个位置：固定和余裕。像这样：http://jsfiddle.net/NeK4k/

来源

2011-02-10 20:32:03

看来，CSS变换可以用来

“‘变换’属性建立在元素的新局部坐标系”，

但是......是不是跨浏览器，似乎只有歌剧作品正常

来源

2012-04-03 10:44:40 4esn0k

如果您的关闭按钮将是文本，这对我来说很好：

#close { 
    position: fixed; 
    width: 70%; /* the width of the parent */ 
    text-align: right; 
} 
#close span { 
    cursor: pointer; 
}

那么你HTML可以只是：

<div id="close"><span id="x">X</span></div>

来源

2014-03-26 18:19:14 thatmiddleway

，当前选中的解决方案似乎误解了问题。

诀窍是既不使用绝对定位也不使用固定定位。相反，关闭按钮之外的其他部分位置设置为相对和一个左浮动，以便它立即正确的div。接下来，设置一个负左边距和一个正Z指数，使其出现在div上方。

下面是一个例子：

#close 
    { 
     position: relative; 
     float: left; 
     margin-top: 50vh; 
     margin-left: -100px; 
     z-index: 2; 
    } 

#dialog 
    { 
     height: 100vh; 
     width: 100vw; 
     position: relative; 
     overflow: scroll; 
     float: left; 
    } 

<body> 
    <div id="dialog"> 
    **** 
    </div> 

    <div id="close"> </div> 
</body>

来源

2015-02-08 11:26:52 Joseph

我知道这是一个老的文章，但我有同样的问题，但没有找到该元素相对固定设置为父母div答案。medium.com上的滚动条是一个很好的纯CSS解决方案，用于设置position: fixed;相对于父元素而不是视口（kinda *）。它是由母体div设置为position: relative;以及具有position: absolute;按钮包装，当然按钮实现的是position: fixed;如下：

<div class="wrapper"> 
    <div class="content"> 
    Your long content here 
    </div> 

    <div class="button-wrapper"> 
    <button class="button">This is your button</button> 
    </div> 
</div> 

<style> 
    .wrapper { 
    position: relative; 
    } 

    .button-wrapper { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50px; 
    } 

    .button { 
    position: fixed; 
    top: 0; 
    width: 50px; 
    } 
</style>

working example

*由于固定元件不与所述页面滚动垂直位置仍将相对于视口，但水平位置相对于此解决方案的父项。

来源

2016-08-02 19:05:07 Lifehack

尝试位置：粘贴对您要修复的元素的父div。

更多的信息在这里：http://html5-demos.appspot.com/static/css/sticky.html。注意：检查浏览器版本兼容性。

来源

2017-06-30 09:01:18

CSS位置是：固定一个定位元件

回答

相关问题