标签: css-position

为什么我绝对定位的div中的背景图像不显示?

我无法弄清楚为什么我绝对定位的div中的背景图像没有显示.我正在使用Firefox,但也在Chrome中.

特别奇怪的是,在Web开发人员工具栏的"编辑CSS"对话框打开时查看页面时,会显示图像.

有问题的图像是id为"joel-image"的div和导航项.

http://joelglovier.com

css css-position

0
推荐指数
1
解决办法
335
查看次数

position:fixed + float:对,div在哪里?

我还在研究HTML和CSS,也许这可能是一个愚蠢的错误.

看看我的HTML,我有#welcome div,但是当我设置float时它就消失了:对.

http://jsfiddle.net/TkQaU/1/

(Chrome或Firefox)

谢谢!

html css position fixed css-position

0
推荐指数
1
解决办法
1万
查看次数

在firefox 7.0.1中固定的postition元素上的奇怪边框

我的固定页眉和页脚元素在firefox中有一个奇怪的边框..

有谁知道如何摆脱这个或它是一个错误?

Firefox错误

在此输入图像描述

在此输入图像描述

HTML 这是主页的html ..

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>
    <meta charset="utf-8">

    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
        More info: h5bp.com/b/378 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>my Sitelocker!</title>
    <meta name="description" content=""> …
Run Code Online (Sandbox Code Playgroud)

css firefox css-position

0
推荐指数
1
解决办法
1931
查看次数

css在IE中固定位置

我试图自己解决这个问题,但未成功.我试图将闪光元素放在底部的固定位置.

#ticker{ position: fixed; bottom: 0; right: 12%; z-index: 6000 !important;}
Run Code Online (Sandbox Code Playgroud)

它适用于FF和Chrome但不适用于IE.我试着改变doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Run Code Online (Sandbox Code Playgroud)

但它不起作用.我读了一些关于放置假元素的东西,但我没有得到它.

css css-position

0
推荐指数
1
解决办法
1294
查看次数

定位绝对iPad容器宽度问题

我在iPad safari中查看问题,我的容器div调整大小以适应绝对定位的元素.iPad似乎将溢出元素的宽度添加到".content"980宽度并缩小以显示大约1080px的宽度.也许有一个属性迫使iPad只能扩大到980px宽度的内容?

我有一个带有内容类的容器div,并定义了以下css属性:

.content{
    position:relative;
    width:980px;
    height:100%;
    margin:0 auto;
}
.e1{left:880px;top:892px;width:300px}
Run Code Online (Sandbox Code Playgroud)

在内容中,我有一个超出980px宽度范围的绝对定位元素,如下所示:

<div class="content">   
   <div class="e1">
      <img src="images/elements/e1.png"/>
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

iPad Safari截图

css css-position

0
推荐指数
1
解决办法
5934
查看次数

如何改变内容流?

在这个jsfiddle中,我正在尝试创建书签形状.只有一个三角形需要改变它的位置.

<div id = "bookmark">
  <div id = "rectangle"></div>
  <div id = "triangle-topleft"></div>
  <div id = "triangle-topright"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我可以很容易地使用相对定位并转移它,但我不想这样做.我想要一个更具延展性的解决方案.

而不是从顶部到底部流动的形状.我希望最后一个形状从左向右流动.因此有3种形状,前两种形状处于完美位置,但第三种形状需要放置在第二种形状的右侧,而不是位于其下方.

我可以使用什么CSS来做到这一点?

html css css-position

0
推荐指数
1
解决办法
149
查看次数

使用左,右和绝对定位对中心进行居中

我有一个div,position:absolute我需要把它放在文档的中心.我认为可行的是使用left:50%; top:50%,但这会使div从顶部向左移动50%,因此它比我想要的更靠右边和底部.有没有办法移动div使用它的中心作为焦点?

高度和宽度都必须是300px,div必须始终位于文档的中心,无论分辨率如何 - 这就是为什么我不能使用静态值并且必须使用百分比

html css html5 css-position

0
推荐指数
2
解决办法
6163
查看次数

使用绝对定位元素将div扩展为文本长度

我试图在列中创建一些容器div,并且其中包含不同长度的段落.

我想将div扩展到正确的高度以允许所有文本,但是当我的元素被设置为时positioned: absolute,我认为它导致了一个问题.

请看我小提琴:http://jsfiddle.net/p7pue2kx/1/

在第一个框中,文本非常适合.但是,当文本更长时,它会溢出并且div容器不会相应地扩展.我想确保有一个最小高度,但最大值由文本大小决定.

有没有更好的方法来进行此定位,这可能允许我的文本扩展容器.

提前致谢.

html css positioning css-position

0
推荐指数
1
解决办法
169
查看次数

没有顶部,右侧,左侧,底部的"位置:相对"是什么?

我正在学习和研究一些最受欢迎的网站的HTML/CSS代码,我发现其中大多数都有"position:relative"属性,没有通常的top,left,right,bottom属性.

这会以某种方式影响页面流,还是像静态属性一样?

例

html css css-position

0
推荐指数
1
解决办法
709
查看次数

如何将元素固定在水平滚动div中

如果我position: absolute在div的内部有一个按钮,则overflow-x: auto该按钮将对齐容器的边缘。

但是,如果div的内容超出了水平宽度,则滚动后该按钮将保持固定在容器内其开始位置。

屏幕截图示例

似乎absolute应该将其固定在一边,但似乎并不能解决问题

有什么方法可以将子级内容固定在水平滚动div的右侧吗?

最小,完整,可验证的示例

.container {
    width: 20rem;
    border: 1px solid grey;
    padding: 1rem 1rem;
    position: relative;
    overflow-x: auto;
}
.container button {
    position: absolute;
    right: 0;
    top: 0;
}
Run Code Online (Sandbox Code Playgroud)
<pre class="container">Multi Line Text
Long piece of content that overflows the width of container<button>Copy</button></pre>
Run Code Online (Sandbox Code Playgroud)

html css css-position

0
推荐指数
1
解决办法
45
查看次数

标签 统计

css ×10

css-position ×10

html ×6

firefox ×1

fixed ×1

html5 ×1

position ×1

positioning ×1