首页 \ 问答 \ CSS:如何有位置:一个位置的绝对div:相对div不被一个溢出:被隐藏在一个容器上(CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container)

CSS:如何有位置:一个位置的绝对div:相对div不被一个溢出:被隐藏在一个容器上(CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container)

我有3级div

  • (绿色在下面)顶级divoverflow: hidden 。 这是因为我想要一些内容(未显示在这个框内),如果它超过了框的大小。
  • (在下面的红色)在这里,我有div position: relative 。 唯一的用途是提供一个新的水平。
  • (在下面的蓝色)最后一个div我取出的流程与position: absolute但我想要相对于红色div (不是页面)定位。

我想把蓝色的盒子从流中取出并展开超出绿色框,但是相对于红色框定位,如:

替代文字http://img.skitch.com/20100211-2iejd2t9iabxb2rgs9b6msht2.png

但是,使用下面的代码,我得到:

alt文字http://img.skitch.com/20100211-mfjtr1st2yy5u4jhc3chi1qi3d.png

并删除position: relative对于红色框,现在蓝色框允许从绿色框中退出,但相对于红色框不再放置:

alt文字http://img.skitch.com/20100211-e96ktg4j9undir396m4p5ka3ki.png

有没有办法:

  • 保持overflow: hidden在绿色框上。
  • 将蓝色框扩展到绿色框之外,并相对于红色框定位?

全面的源码,用于测试的内联CSS:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
                <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
            </div>
        </div>
    </body>
</html>

I have 3 levels of div:

  • (In green below) A top level div with overflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box.
  • (In red below) Inside this, I have div with position: relative. The only use for this is for the next level.
  • (In blue below) Finally a div I take out of the flow with position: absolute but that I want positioned relative to the red div (not to the page).

I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:

However, with the code below, I get:

And removing the position: relative on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:

Is there a way to:

  • Keep the overflow: hidden on the green box.
  • Have the blue box expand beyond the green box and be positioned relative to red box?

The full source, with inline CSS for the sake of testing:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
                <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
            </div>
        </div>
    </body>
</html>

原文:https://stackoverflow.com/questions/2243245
更新时间:2021-11-14 21:11

最满意答案

主要区别在于统一性,您将明确地注册要在组合中使用的每个类:

var container = new UnityContainer();
container.RegisterType<IFoo,Foo>();
container.RegisterType<IBar,Bar>();
...
var program = container.Resolve<Program>();
program.Run();

另一方面,在MEF中,您可以使用属性标记类,而不是在其他地方注册它们:

[Export(typeof(IFoo))]
public Foo
{
   ...
}

一见钟情就像一个小小的句法差异,但实际上比这更重要。 MEF旨在允许动态发现零件。 例如,使用DirectoryCatalog ,您可以通过简单地将应用程序文件夹中的新DLL拖放到扩展方案中来设计应用程序。

在本示例中,MEF将在给定目录中使用[Export(typeof(IPlugin))]属性查找并实例化所有类,并将这些实例传递给Program构造函数:

[Export]
public class Program
{
    private readonly IEnumerable<IPlugin> plugins;

    [ImportingConstructor]
    public Program(
       [ImportMany(typeof(IPlugin))] IEnumerable<IPlugin> plugins)
    {
        this.plugins = plugins;
    }

    public void Run()
    {
        // ...
    }
}

入口点:

public static void Main()
{
    using (var catalog = new DirectoryCatalog(".","*"))
    using (var container = new CompositionContainer(catalog))
    {
        var program = container.GetExportedValue<Program>();
        program.Run();
    }
}

为了适应这种动态组合情景,MEF具有“稳定组合”的概念,这意味着当它在某处遇到缺失依赖时,它将简单地将该部分标记为不可用,并且将继续组合。

稳定的组合可能是非常有用的 ,但它也使得很难调试失败的组合 。 因此,如果您不需要动态发现零件和“稳定组合”,我将使用常规DI容器而不是MEF。 与MEF不同,常规DI容器会在缺少依赖关系时给出明确的错误消息。

也可以通过使用与MEF集成的DI容器(如Autofac)来获得两个世界的最佳效果 。 使用Autofac构建核心应用程序,MEF可用于需要动态扩展的部件。


The main difference is that with unity you will explicitly register each class you want to use in the composition:

var container = new UnityContainer();
container.RegisterType<IFoo,Foo>();
container.RegisterType<IBar,Bar>();
...
var program = container.Resolve<Program>();
program.Run();

In MEF on the other hand, you mark classes with attributes instead of registering them somewhere else:

[Export(typeof(IFoo))]
public Foo
{
   ...
}

At first sight this looks like a minor syntactic difference, but it is actually more important than that. MEF is designed to allow for the dynamic discovery of parts. For example, with a DirectoryCatalog you can design your application in such a way that you can extend it by simply dropping new DLLs in the application folder.

In this example, MEF will find and instantiate all classes with an [Export(typeof(IPlugin))] attribute in the given directory and passes those instances to the Program constructor:

[Export]
public class Program
{
    private readonly IEnumerable<IPlugin> plugins;

    [ImportingConstructor]
    public Program(
       [ImportMany(typeof(IPlugin))] IEnumerable<IPlugin> plugins)
    {
        this.plugins = plugins;
    }

    public void Run()
    {
        // ...
    }
}

Entry point:

public static void Main()
{
    using (var catalog = new DirectoryCatalog(".","*"))
    using (var container = new CompositionContainer(catalog))
    {
        var program = container.GetExportedValue<Program>();
        program.Run();
    }
}

To accommodate such dynamic composition scenarios, MEF has a concept of "stable composition", which means that when it runs into a missing dependency somewhere it will simply mark the part as unavailable and will continue the composition anyway.

Stable composition can be quite useful, but it also makes it very difficult to debug a failed composition. So if you don't need dynamic discovery of parts and "stable composition", I would use a regular DI container instead of MEF. Unlike MEF, regular DI containers will give you clear error messages when a dependency is missing.

It might also be possible to get the best of both worlds by using a DI container which integrates with MEF, like Autofac. Use Autofac to compose the core application, and MEF for the parts which need to be dynamically extensible.

相关问答

更多
  • 似乎在国内游戏行业所有的新技术出来,都会被首先问到这个问题。这也难怪,在国内做游戏开发就等于做网游开发,这是我们现在的主流。然而这些新技术的发源地恰巧又是以console game为主流,它们或多或少都带有为console game服务的色彩。这个矛盾一直存在着,就像这个问题一直存在一样。从大的方面看,Unity,UE这些引擎都属于泛用型游戏引擎,基本的设计思想和架构都是大同小异。我们可以看一下这些泛用型引擎都可以解决什么问题。图形渲染至少在现阶段,图形渲染仍然是最重要的部分,也是唯一能够看到的部分,所以大 ...
  • 在由Scott Guthrie编写的PDC 2008第二期主题演讲中特别提到,MEF与扩展Visual Studio 2008和其他应用程序有很多关系,而无需使用所有COM和较旧的技术......扩展除了其他内容外,还展示了VS2008中的文本版本。 从第二天的主题演讲( http://www.microsoftpdc.com )开始大约一个小时15分钟,您将获得直接信息,但基本上,如果您要“构建具有可轻松构建的可扩展性点的应用程序被发现,并支持发现扩展“,那么MEF就是你想要的。 UNITY是您想要的一种 ...
  • MEF允许你设计一个可以扩展的系统。 根据我的经验,您可以设计接口,创建具有这些接口的实现的库,并在运行时动态加载它们。您还可以确定应该如何加载这些扩展 - 在相同的应用程序域或新的扩展中,等等。你可以将它指向一个目录并告诉它获得某个接口的所有实现,并加载它们以在你的应用程序中使用。 所以,因为你的应用程序不需要事先知道它的所有功能,并且可以动态地加载它们,你可以说它是“可扩展的”.. 另外,还有MAF,托管外接框架或.NET中的System.AddIn命名空间。 这有一些重叠,但更加针对插件或插件模型。 ...
  • 在MEF编程指南中 ,阅读出口和元数据部分 。 它显示了如何通过使用ExportMetadata属性或定义您自己的自定义导出属性来在导出的零件上添加元数据。 然后你可以像这样定义一个ILoggerMetadata接口: public interface ILoggerMetadata { string Catagory { get; } } 并执行一个IEnumerable>然后在代码中选择你想要的那个: private ILogger ...
  • 主要区别在于统一性,您将明确地注册要在组合中使用的每个类: var container = new UnityContainer(); container.RegisterType(); container.RegisterType(); ... var program = container.Resolve(); program.Run(); 另一方面,在MEF中,您可以使用属性标记类,而不是在其他地方注册它们: [Export(typeof(I ...
  • 当煮沸时,主要区别是IoC容器通常对于静态依赖关系最为有用(在编译时已知),MEF通常对动态依赖性最为有用(仅在运行时才知道)。 因此,它们都是组合引擎,但每种模式的重点都是非常不同的。 因此,设计决策变化很大,因为MEF针对未知部件的发现进行了优化,而不是已知部件的注册。 以这种方式思考:如果您正在开发整个应用程序,IoC容器可能最好。 如果您正在撰写可扩展性,那么第三方开发人员将扩展您的系统,MEF可能是最好的。 此外,@Pavel Nikolov的回答中的文章提供了一些很大的方向(由MEF的项目经理G ...
  • 导出零件时,默认情况下它使用CreationPolicy为Shared 。 这实际上使导出的实例成为容器中的单例。 使用导出,添加另一个属性: [Export, PartCreationPolicy(CreationPolicy.NonShared)] public class Foo { } 这将确保每次调用组合使用者实例时都会创建一个新实例。 When you export a part, by default it used a CreationPolicy of Shared. This esse ...
  • 棘手的问题 - 因为两者确实在一定程度上重叠。 我会这样说: 使用任何有用的IoC,如果您主要关注依赖注入以解耦您的组件,例如为了能够注入模拟(用于测试) 特别是如果你更多的是可扩展的,比如能够“从该目录加载导出某个接口的所有程序集”,并且如果你需要可扩展并为第三方开放(比如Visual Studio:提供public API,以便其他人可以为您的应用程序编写扩展程序)。 这正是MEF真正闪耀的地方 对于MEF和Unity,还有MEF和Unity Integration Layer将这两种工具的优势结合在一 ...
  • 我找到了答案。 现在可以使用部署目录了。 这些是我采取的步骤: - 首先我删除了旧的改编MEF库的组件 - 我升级了我的月光以预览月光3 http://www.go-mono.com/moonlight/prerelease.aspx-然后将组件更改为MEF的silverlight组件预览9 我不仅仅是工作(: I found the answer. Deployment catalog is now avaible. these are the steps I took: -First I removed ...
  • 在最新的预览版本( MEF 2 Preview 3 )中添加了命名导出作为MEF常规模型的一部分 (参见“显式布线”部分)。 但是,这在.NET 4中尚不可用。此外,预览版中的API可能会发生变化。 现在,您可以通过将名称添加到导出合约中,为具有不同合同的同一类创建两个导出: public class MyClass { } public class MyClassExporter { [Export("Name1", typeof(MyClass))] public MyClass Nam ...

相关文章

更多

最新问答

更多
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
  • 无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
  • xcode语法颜色编码解释?(xcode syntax color coding explained?)
  • 在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
  • 从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
  • 从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
  • 西安哪有PLC可控制编程的培训
  • 在Entity Framework中选择基类(Select base class in Entity Framework)
  • 在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)
  • 电脑二级VF有什么用
  • Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)
  • 金华英语角.
  • 手机软件如何制作
  • 用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)
  • 注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)
  • 如何读R中的大数据集[复制](How to read large dataset in R [duplicate])
  • Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)
  • 如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)
  • python的访问器方法有哪些
  • DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)
  • 在Ruby中对组合进行排序(Sorting a combination in Ruby)
  • 网站开发的流程?
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。