html 固定一条直线的位置,html-CSS位置：固定在定位元素内

html-CSS位置：固定在定位元素内

我有一个定位的div，其内容可能太长，因此出现滚动条(已设置overflow:auto)。它充当ajax应用程序中的对话框。我想在其右上角修复一个关闭按钮，以便当用户滚动div时不会滚动离开。

我尝试使用position:fixed; right:0; top:0进行尝试，但是它将按钮放置在页面的右上角而不是div中(在Firefox中)。

是否可以仅使用CSS进行此按钮放置，而不会在每次滚动事件中都破坏js中的offsetWidth / Height？

ps：div的高度和宽度不是固定值，它取决于内容的大小和浏览器窗口的大小。用户还可以根据需要调整其大小。

7个解决方案

82 votes

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

在此处查看演示：[http://jsbin.com/icili5]

Sotiris answered 2019-09-27T12:37:25Z

14 votes

当前选择的解决方案似乎已经误解了该问题。

诀窍是既不使用绝对定位也不使用固定定位。而是将div外部的关闭按钮的位置设置为相对，并向左浮动，使其紧靠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;

}

****

Joseph answered 2019-09-27T12:38:01Z

5 votes

position:absolute给出了有关“浏览器”窗口的绝对位置。所以它当然会去那里。

尽管position:absolute引用了父元素，所以如果将

按钮放置在容器的

内部，则它应该位于您想要的位置。就像是

编辑：感谢@Sotiris，他有一点，可以使用position：fixed和margin-left来实现解决方案。像这样：[http://jsfiddle.net/NeK4k/]

Damien Pirsy answered 2019-09-27T12:38:45Z

4 votes

我知道这是一篇老文章，但我有相同的问题，但是没有找到一个将元素相对于父级div固定的答案。medium.com上的滚动条是一个很棒的纯CSS解决方案，用于相对于position: fixed;设置某些内容父元素而不是视口(kinda *)。这是通过将父级div设置为position: relative;并具有position: absolute;的按钮包装而实现的，按钮当然是position: fixed;，如下所示：

Your long content here

This is your button

.wrapper {

position: relative;

}

.button-wrapper {

position: absolute;

right: 0;

top: 0;

width: 50px;

}

.button {

position: fixed;

top: 0;

width: 50px;

}

工作实例

*由于固定元素不随页面滚动，因此此解决方案的垂直位置仍相对于视口，而水平位置相对于父级。

Lifehack answered 2019-09-27T12:39:27Z

2 votes

似乎可以使用CSS转换

“'transform'属性在元素上建立了新的本地坐标系”，

但是...这不是跨浏览器，似乎只有Opera可以正常工作

4esn0k answered 2019-09-27T12:40:12Z

1 votes

尝试在您要修复的元素的父div上放置position：sticky。

此处提供更多信息：[http://html5-demos.appspot.com/static/css/sticky.html。] 警告：检查浏览器版本兼容性。

Lohit Bisen answered 2019-09-27T12:40:49Z

0 votes

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

#close {

position: fixed;

width: 70%; /* the width of the parent */

text-align: right;

}

#close span {

cursor: pointer;

}

那么您的HTML可以是：

thatmiddleway answered 2019-09-27T12:41:26Z

html 固定一条直线的位置,html-CSS位置：固定在定位元素内相关推荐

css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
两条直线的交点 c语言,计算两条直线的交点(C#)
PS:从其他地方看到的源码是有问题的.下面是修正后的 /// /// 计算两条直线的交点 /// /// L1的点1坐标 /// L1的点2坐标 /// L2的点1坐标 /// L2的点2坐标 /// ...
html固定表的属性是什么,css如何固定表头
css如何固定表头实现头部导航栏固定用到的属性是:position:sticky . 粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素. ...
每天一道LeetCode-----平面上n个点，计算最多有多少个点在一条直线上
Max Points on a Line 原题链接Max Points on a Line 给出2D平面中的n个坐标点,计算最多有多少个点在一条直线上一条直线可以用斜率表示,即如果已知(x1,y1) ...
c++图形中如何判断鼠标点击在一条直线上_中考数学常考题型精讲精练系列:函数图象上点的存在性问题中的距离与面积...
函数图象上点的存在性问题中的距离与面积(下)第1段函数图象上点的存在性问题中的距离与面积(下)第2,3段函数图象上点的存在性问题中的距离与面积(下)第4段判断函数的图像是中考的重要考点,主要有以 ...
tensor flow lstm 图像一条直线_深入理解LSTM
LSTM Author:louwill From:深度学习笔记原始结构的RNN还不够处理较为复杂的序列建模问题,它存在较为严重的梯度消失问题,最直观的现象就是随着网络层数增加,网络会逐渐变得无法训练 ...
两条直线求交点c语言,C§ 3.3.1两条直线的交点坐标（5页）-原创力文档
§ 3.1两条直线的交点坐标学习目标 1．掌握判断两直线相交的方法:会求两直线交点坐标: 2.体会判断两直线相交中的数形结合思想. 学习过程一.课前准备: (预习教材P112~ P114,找出疑 ...
n条直线相交最多有几个邻补角_【初中数学】102条做初中几何辅导线的规律
今天给大家整理的是[初中数学]102条做初中几何辅导线的规律资料如果能帮到你,希望你可以帮忙点赞-感谢-收藏支持一下! 若你需要下载word来打印,可以查看我的个人简介,上面有资料下载方式. (资料 ...
Bootstrap固定导航条
固定导航条默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动. 很多时候,我们却希望导航条固定在浏览器窗口的顶部或底部,这种固定导航条的应用 ...

html 固定一条直线的位置,html-CSS位置：固定在定位元素内

html 固定一条直线的位置,html-CSS位置：固定在定位元素内相关推荐

最新文章

热门文章