我无法弄清楚为什么我绝对定位的div中的背景图像没有显示.我正在使用Firefox,但也在Chrome中.
特别奇怪的是,在Web开发人员工具栏的"编辑CSS"对话框打开时查看页面时,会显示图像.
有问题的图像是id为"joel-image"的div和导航项.
我还在研究HTML和CSS,也许这可能是一个愚蠢的错误.
看看我的HTML,我有#welcome div,但是当我设置float时它就消失了:对.
(Chrome或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) 我试图自己解决这个问题,但未成功.我试图将闪光元素放在底部的固定位置.
#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)
但它不起作用.我读了一些关于放置假元素的东西,但我没有得到它.
我在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)

在这个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来做到这一点?
我有一个div,position:absolute我需要把它放在文档的中心.我认为可行的是使用left:50%; top:50%,但这会使div从顶部向左移动50%,因此它比我想要的更靠右边和底部.有没有办法移动div使用它的中心作为焦点?
高度和宽度都必须是300px,div必须始终位于文档的中心,无论分辨率如何 - 这就是为什么我不能使用静态值并且必须使用百分比
我试图在列中创建一些容器div,并且其中包含不同长度的段落.
我想将div扩展到正确的高度以允许所有文本,但是当我的元素被设置为时positioned: absolute,我认为它导致了一个问题.
请看我小提琴:http://jsfiddle.net/p7pue2kx/1/
在第一个框中,文本非常适合.但是,当文本更长时,它会溢出并且div容器不会相应地扩展.我想确保有一个最小高度,但最大值由文本大小决定.
有没有更好的方法来进行此定位,这可能允许我的文本扩展容器.
提前致谢.
我正在学习和研究一些最受欢迎的网站的HTML/CSS代码,我发现其中大多数都有"position:relative"属性,没有通常的top,left,right,bottom属性.
这会以某种方式影响页面流,还是像静态属性一样?

如果我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)