html - 用于在绝对位置显示 div 的 css

coder 2023-08-07 原文

我想在 z-index:99 的给定图像上显示 div 'class=perspectiveHomeMenu'。

#perspective {
  display: none;
}
img {
  width: 100%;
  /*for demo*/
  height: 100px;
  /*for demo*/
}
.perspectiveContent-submenuMenu {
  display: none;
}
.perspectiveHomeContent {
  width: 65%;
  margin: 0% 5% 6%;
  background-color: rgb(241, 241, 241);
  float: left;
  padding: 0%;
}
.perspectiveHomeContent .imageAlign {
  float: left;
  width: 100%;
}
.contentHomeAlign {
  float: left;
  margin: 2% 3%;
  width: 98%;
  padding: 1%;
}
.perspectiveHomecontentImage iframe,
.perspectiveHomecontentImage img {
  width: 100% !important;
}
.contentHomeAlign .perspectiveContentHeading {
  font-size: 14pt;
  margin: 0% 0 0;
  color: rgb(106, 90, 148);
}
.perspectiveContentHeading a {
  color: rgb(106, 90, 148);
}
.contentHomeAlign p {
  font-size: 10pt;
}
.authorshomeLink {
  font-size: 11pt;
}
.perspectiveHomeMenu {
  background-color: rgb(106, 90, 148);
  /*-webkit-transform: skew(-20deg);*/
}
.perspectiveHomeMenu a {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(128, 70, 168, 1) 0%, rgba(163, 36, 168, 1) 100%) repeat scroll 0 0;
  font-size: 10pt;
  padding: 1%;
  float: right;
  position: relative;
  color: #ffffff;
}

<div class="banner">
  <img src="" alt="banner">
</div>
<div class="perspectiveContentsection">
  <div class="perspectiveHomeContent">
    <div class="imageAlign">
      <div class="perspectiveHomecontentImage">
        <img src="" alt="This is the image.Need to display blogs here">
      </div>
      <div class="perspectiveHomeMenu">
        <a>Blogs</a>
      </div>
    </div>
    <div class="contentHomeAlign">
      <div class="perspectiveContentHeading"><a>Title of the content</a>
      </div>
      <div class="authorshomeLink"><a>Test Author</a>
      </div>
      <div>sample body content.sample body content.sample body content.sample body content.sample body content.</div>
      <div class="perspectiveReadurl"><a>Read More</a>
      </div>
    </div>

  </div>
</div>

我想在右上角的图片上显示博客

最佳答案

移动<div class="perspectiveHomeMenu">进入<div class="perspectiveHomecontentImage"> ，这是您的 HTML 中唯一的变化。

然后给position:relative;和 position:absolute;到父分区。我编辑的 css 如下:

.perspectiveHomecontentImage{
    position:relative;
}
.perspectiveHomeMenu{
    background-color:rgb(106,90,148);
    /*-webkit-transform: skew(-20deg);*/
    position:absolute;
    right:0;
    top:0;
}

这是您的工作片段:

#perspective{
	  display:none;
  }
img{
  width:100%; /*for demo*/
  height:100px;/*for demo*/
}
  .perspectiveContent-submenuMenu{
	  display:none;
  }
  .perspectiveHomeContent{
	width:65%;
	margin:0% 5% 6%;
	background-color:rgb(241,241,241);
	float:left;
	padding:0%;
  }
  .perspectiveHomeContent .imageAlign
{
	float:left;
	width:100%;
}
.contentHomeAlign
{
	float:left;
	margin:2% 3%;	
	width:98%;
	padding:1%;
}
.perspectiveHomecontentImage iframe,.perspectiveHomecontentImage img{
	width:100% !important;
}
.contentHomeAlign .perspectiveContentHeading{
	font-size:14pt;
	margin:0% 0 0;
	color:rgb(106,90,148);
}
.perspectiveContentHeading a{
	color:rgb(106,90,148);
}
.contentHomeAlign p{
	font-size:10pt;
}
.authorshomeLink{
	font-size:11pt;
}
.perspectiveHomecontentImage{
  position:relative;
}
.perspectiveHomeMenu{
	background-color:rgb(106,90,148);
	/*-webkit-transform: skew(-20deg);*/
  position:absolute;
  right:0;
  top:0;
}
.perspectiveHomeMenu a{
	background:rgba(0, 0, 0, 0) linear-gradient(to right, rgba(128, 70, 168, 1) 0%, rgba(163, 36, 168, 1) 100%) repeat scroll 0 0;
	font-size:10pt;
	padding:5px;
	float:right;
	position:relative;
	color:#ffffff;
}

<div class="banner">
     <img src="" alt="banner">
 </div>
<div class="perspectiveContentsection">
             <div class="perspectiveHomeContent">
				<div class="imageAlign">
				    <div class="perspectiveHomecontentImage">
					  <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="This is the image.Need to display blogs here">
                      <div class="perspectiveHomeMenu">
					  <a>Blogs</a>
					</div>
				</div>	
				</div>
                <div class="contentHomeAlign">
				<div class="perspectiveContentHeading"><a>Title of the content</a></div>
				<div class="authorshomeLink"><a>Test Author</a></div>
				<div>sample body content.sample body content.sample body content.sample body content.sample body content.</div>
				<div class="perspectiveReadurl"><a>Read More</a></div>
				</div>	

			</div>
		</div>

关于html - 用于在绝对位置显示 div 的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41561311/

绝对 html div gt lt css

有关html - 用于在绝对位置显示 div 的 css的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - link_to 不显示任何 rails - 2
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢最佳答案关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

html - 用于在绝对位置显示 div 的 css

有关html - 用于在绝对位置显示 div 的 css的更多相关文章

随机推荐