Html CSS边框与边栏和标题重叠_Html_Css

Html CSS边框与边栏和标题重叠

html css

Html CSS边框与边栏和标题重叠,html,css,Html,Css,我试图使它，使我有一个标题和边栏连接，但不重叠的边界这是我的HTML作为一个例子 <body> <div id="header"> </div> <div id="sidebar"> </div> </body> #sidebar { position: fixed; background-color: blue;

我试图使它，使我有一个标题和边栏连接，但不重叠的边界

这是我的HTML作为一个例子

<body>
    <div id="header">
    </div>
    <div id="sidebar">
    </div>
</body>

        #sidebar {
            position: fixed;
            background-color: blue;
            height: 100%;
            width: 128px;
            border-right: 10px solid black;
        }

        #header {
            position: absolute;
            background-color: blue;
            height: 100px;
            width: 100%;
            border-bottom: 10px solid black;
        }

我在用语言表达我的想法时有点困难，所以我还要提供一个理想结果的图像

当div是透明的时，我也希望这样做。

我会在内部空白处放置一个外部边框，作为一个单独的容器，而不是在蓝色的边栏和标题上。

我会在内部空白处放置一个外部边框，作为一个单独的容器，而不是在蓝色边栏和标题上。

这是文档，我还添加了

边距：0

删除页面边缘与页眉和侧边栏之间的空格

<html>
  <style>
    body {
    margin: 0;
 }
 #sidebarLeft {
    position: fixed;
    height: calc(100% - 200px);
    width: 128px;
    border-right: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-top: 100px;
}
#sidebarRight {
    position: fixed;
    height: calc(100% - 200px);
    width: 128px;
    border-left: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-top: 100px;
    right: 0;
}
#header {
    position: absolute;
    height: 100px;
    width: calc(100% - 276px);
    border-bottom: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-left: 138px;
}
#corner {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    position: absolute;

}
#Bcorner {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    bottom: 0;
    position: absolute;
}
#cornerTopRight {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    right: 0;
    position: absolute;
}
#cornerBottomRight {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    bottom: 0;
    right: 0;
    position: absolute;
}
#footer {
    position: absolute;
    height: 100px;
    width: calc(100% - 276px);
    border-top: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-left: 138px;
    bottom: 0;
}
</style>
<body>
<div id="top">
<div id="corner">
</div>
<div id="header">
</div>
</div>
<div id="sidebarLeft">
</div>
<div id="sidebarRight">
</div>
<div id="bottom">
<div id="Bcorner">
</div>
<div id="footer">
</div>
</div>
<div id="cornerTopRight">
</div>
<div id="cornerBottomRight">
</div>
</body>
</html>


身体{
保证金：0；
}
#侧边栏{
位置：固定；
高度：计算（100%-200px）；
宽度：128px；
右边框：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
边缘顶部：100px；
}
#边栏{
位置：固定；
高度：计算（100%-200px）；
宽度：128px；
左边框：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
边缘顶部：100px；
右：0；
}
#标题{
位置：绝对位置；
高度：100px；
宽度：计算（100%-276px）；
边框底部：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
左边距：138px；
}
#角落{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
位置：绝对位置；
}
#B角{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
底部：0；
位置：绝对位置；
}
#右上角{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
右：0；
位置：绝对位置；
}
#右下角{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
底部：0；
右：0；
位置：绝对位置；
}
#页脚{
位置：绝对位置；
高度：100px；
宽度：计算（100%-276px）；
边框顶部：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
左边距：138px；
底部：0；
}

这是文件，我还添加了

页边距：0

删除页面边缘与页眉和侧边栏之间的空格

<html>
  <style>
    body {
    margin: 0;
 }
 #sidebarLeft {
    position: fixed;
    height: calc(100% - 200px);
    width: 128px;
    border-right: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-top: 100px;
}
#sidebarRight {
    position: fixed;
    height: calc(100% - 200px);
    width: 128px;
    border-left: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-top: 100px;
    right: 0;
}
#header {
    position: absolute;
    height: 100px;
    width: calc(100% - 276px);
    border-bottom: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-left: 138px;
}
#corner {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    position: absolute;

}
#Bcorner {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    bottom: 0;
    position: absolute;
}
#cornerTopRight {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    right: 0;
    position: absolute;
}
#cornerBottomRight {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    bottom: 0;
    right: 0;
    position: absolute;
}
#footer {
    position: absolute;
    height: 100px;
    width: calc(100% - 276px);
    border-top: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-left: 138px;
    bottom: 0;
}
</style>
<body>
<div id="top">
<div id="corner">
</div>
<div id="header">
</div>
</div>
<div id="sidebarLeft">
</div>
<div id="sidebarRight">
</div>
<div id="bottom">
<div id="Bcorner">
</div>
<div id="footer">
</div>
</div>
<div id="cornerTopRight">
</div>
<div id="cornerBottomRight">
</div>
</body>
</html>


身体{
保证金：0；
}
#侧边栏{
位置：固定；
高度：计算（100%-200px）；
宽度：128px；
右边框：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
边缘顶部：100px；
}
#边栏{
位置：固定；
高度：计算（100%-200px）；
宽度：128px；
左边框：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
边缘顶部：100px；
右：0；
}
#标题{
位置：绝对位置；
高度：100px；
宽度：计算（100%-276px）；
边框底部：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
左边距：138px；
}
#角落{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
位置：绝对位置；
}
#B角{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
底部：0；
位置：绝对位置；
}
#右上角{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
右：0；
位置：绝对位置；
}
#右下角{
背景色：rgba（191,63187,0.5）；
宽度：138px；
高度：100px；
底部：0；
右：0；
位置：绝对位置；
}
#页脚{
位置：绝对位置；
高度：100px；
宽度：计算（100%-276px）；
边框顶部：10px实心rgba（0,0,0,0.50）；
背景色：rgba（191,63187,0.5）；
左边距：138px；
底部：0；
}

我是html/css新手。。。但我不想添加一个

显示：内联块我是html/css的新手。。。但我不想添加一个

显示：内联块id#边栏给出页边空白顶部：100px
<style>
body{ margin:0; padding:0;}
#sidebar {
        position: fixed;
        background-color: blue;
        height: 100%;
        width: 128px;
        border-right: 10px solid black;
        margin-top:100px;
    }

    #header {
        position: absolute;
        background-color: blue;
        height: 100px;
        width: 100%;

        border-bottom: 10px solid black;
    }
  </style>


正文{margin:0；padding:0；}
#边栏{
位置：固定；
背景颜色：蓝色；
身高：100%；
宽度：128px；
右边框：10px纯黑；
边缘顶部：100px；
}
#标题{
位置：绝对位置；
背景颜色：蓝色；
高度：100px；
宽度：100%；
边框底部：10px纯黑；
}
id#侧边栏给出页边空白顶部：100px
<style>
body{ margin:0; padding:0;}
#sidebar {
        position: fixed;
        background-color: blue;
        height: 100%;
        width: 128px;
        border-right: 10px solid black;
        margin-top:100px;
    }

    #header {
        position: absolute;
        background-color: blue;
        height: 100px;
        width: 100%;

        border-bottom: 10px solid black;
    }
  </style>


正文{margin:0；padding:0；}
#边栏{
位置：固定；
背景颜色：蓝色；
身高：100%；
宽度：128px；
右边框：10px纯黑；
边缘顶部：100px；
}
#标题{
位置：绝对位置；
背景颜色：蓝色；
高度：100px；
宽度：100%；
边框底部：10px纯黑；
}
编辑：
对于侧边栏，请尝试以下操作：
#sidebar {
        position: fixed;
        background-color: blue;
        top: 108px;
        height: calc(100% - 100px);
        width: 128px;
        border-right: 10px solid black;
    }

它向下移动侧边栏，使其与页眉的底部边框完全重叠，并缩短到侧边栏，使其具有100%的高度
这是一个代码笔：
编辑：
对于侧边栏，请尝试以下操作：
#sidebar {
        position: fixed;
        background-color: blue;
        top: 108px;
        height: calc(100% - 100px);
        width: 128px;
        border-right: 10px solid black;
    }

它向下移动侧边栏，使其与页眉的底部边框完全重叠，并缩短到侧边栏，使其具有100%的高度
这是一个密码笔：
body{margin:0；}
#边栏{
位置：固定；
背景颜色：蓝色；
身高：100%；
宽度：128px；
z指数：2；
不透明度：.5；
顶部：100px；
}
#标题{
位置：绝对位置；
背景颜色：蓝色；
高度：100px；
宽度：100%；
z指数：2；
不透明度：.5；
}
#侧边栏：之后，#标题：之后{
内容：''；
显示：块；
背景：黑色；
位置：绝对位置；
}
#侧边栏：之后{
底部：0；
顶部：10px；
右：-10px；
宽度：10px；
}
#标题：之后{
高度：10px；
底部：-10px；
右：0；
左：128px；
}


body{margin:0；}